[JS] 문자열 string

sang969 2023. 7. 7. 15:02

charAt()

자바스크립트(JavaScript)에서는 문자형 데이터를 객체화한 String 객체를 제공함으로써 그 안에 내장되어있는 속성 및 함수를 통해 다양한 기능을 제공하고 있습니다. charAt() 함수를 시작으로 "문자열" 객체에서 제공하는 속성 및 함수에 대해서 하나씩 알아보도록 하겠습니다.

charAt() 함수는 문자열에서 인자로 넘긴 index에 해당하는 문자형 데이터를 반환해주는 함수입니다. 아래 샘플예제를 통해 함수가 동작하는 방식에 대해 이해해봅시다.

const Sample = "Hello";
const Sample2 = Sample.charAt(1);

console.log(Sample2);

// e

str.indexOf() , str.lastIndexOf()

IndexOf("찾을문자") 함수는 문자열의 왼쪽부터 시작하여 찾을 문자와 일치하는 최초의 문자의 Index를 반환하는 함수입니다. 두 번째 인자를 지정 하여 검색하는 시작 Index도 지정할 수 있습니다. 반면 lastIndexOf() 함수의 경우는 IndexOf()와 비슷한 기능을 제공하지만, 차이점은 찾을 문자를 문자열 오른쪽에서부터 찾는다는 점입니다. 두 함수 모두 일치하는 문자를 찾지 못하면 -1을 반환합니다.

value: 찾으려는 특정문자
문자열에서 특정문자를 포함하는 첫 번째 위치를 반환
문자열에 특정문자가 없다면 -1을 반환

str.indexOf(value)

ex)

const str = "abcDeFgHIJklMn";

consol.log(str.indexOf("cD")); // 2

str.slice()

slice() 함수는 배열로 부터 특정 범위를 복사한 겂들을 담고 있는 새로운 배열을 만드는데 사용한다. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스 부터 종료 인덱스까지 값을 복사하여 반환한다.

arr.slice([begin[,end]])

array.slice(1, 3)

[0]	[1]	[2]	[3]
a	b	c	d

1 => [1] 3=>[3] ([3] 출력시 미포함)

slice 함수는 잘라낼 배열의 시작index와 end index를 파라미터로 받아서,

그 사이의 원소들을 새로운 배열로 만들어서 리턴합니다.

이때 원본 배열인 arr은 변경되지 않습니다.

☆리턴값: 잘라낸 원소들로 만든 새로운 배열을 리턴합니다.

ex.1)

const arr = ['a', 'b', 'c', 'd'];

const arr1 = arr.slice(1, 3); // [ 'b', 'c' ]
const arr2 = arr.slice(1); // ['b', 'c', 'd']
const arr3 = arr.slice(-3, -1); // ['b', 'c']

※ slice(1)은 두번째 파라미터인 end 값이 입력되지 않으면,

시작 index부터 배열의 끝까지를 복사한, 새 배열을 리턴합니다.

str.split()

split() 함수는 구분자(separator)를 기준으로 '문자열'을 나눈 후 나뉜 문자열을 하나의 배열로 반환합니다.

string.split(separator, limit)

separator

생략가능
문자열을 구분할 구분자
필수 값이 아니므로 값이 입력되지 않으면 문자열 전체를 배열에 담아서 리턴한다.

limit

생략가능
최대한 분할 갯수

ex)

const str = "abcDeFgHIJklMn";

console.log(str.split("F"));
// ['abcDe', 'gHIJklMn']

ex.2)

let str = 'HTML,CSS,JavaScript';
let words = str.split(',', 2);

document.write(words[0] + " <br>");
document.write(words[1] + " <br>");
// HTML
// CSS

ex.3)

const string = 'hello, world, javascript';
console.log(string.split(',', 0));
console.log(string.split(',', 1));
console.log(string.split(',', 2));
console.log(string.split(',', 3));
//[],
//['hello',]
//['hello', 'world']
//['hello', 'world', 'javascript']

str.replace

문자열 내의 특정 문자열을 치환해 주기 위해서

Javascript에서는 replace() 함수를 사용합니다.

str.replace(searchValue, newValue)

replace() 함수는 searchValue, newValue를 파라미터로 입력받고

문자열에서 searchValue를 찾아서 newValue로 치환합니다.

ex)

const str = "abcDeFgHIJklMn";

console.log(str.replace("Fg", " "));
// abcDe HIJklMn

ex.2)

let str = 'apple, banana, orange';
let replaced_str = str.replace('banana', 'tomato');

document.write('변경 전 : ', str, '<br/>');
document.write('변경 후 : ', replaced_str, '<br/>');

// 변경 전 : apple, banana, orange
// 변경 후 : apple, tomato, orange

※ replace() 함수는 문자열에서 첫번째로 찾은 문자열만 치환해준다.

ex.3)

let str = 'apple, Banana, orange';
let replaced_str = str.replace('banana', 'tomato');

document.write('변경 전 : ', str, '<br/>');
document.write('변경 후 : ', replaced_str, '<br/>');

//변경 전 : apple, Banana, orange
//변경 후 : apple, Banana, orange

예제에서 원래 문자열은 'Banana'를 포함하고 있고, 첫 글자는 대문자입니다.

replace() 함수는 대소문자를 구분하기 때문에,

'banana'를 찾아서 변경하려고 시도하면 'Banana'는 다른 문자열로 인식되어 변경되지 않습니다.

str.replaceAll()

string.replaceAll(search, replaceWith) 구문은 모든 search에 매치되는 문자열을 replaceWith로 바꿔줍니다.

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted,
was it really lazy?';

console.log(p.replaceAll('dog', 'monkey'));
// "The quick brown fox jumps over the lazy monkey. If the monkey reacted,
// was it really lazy?"