자바스크립트 : 문자열 객체

00. at()

"문자열".at(위치값)

지정한 숫자(index)를 받아, 문자열에서 해당되는 인덱스의 요소를 반환합니다.
대소문자를 구별합니다.
문자열의 길이보다 큰 인덱스를 지정하면 undefined를 반환합니다.
음수인 경우 문자열의 오른쪽에서부터 인덱스를 셉니다.
여기서 주어진 문자열은 "javascript reference"이며, at() 함수에 인덱스를 전달하여 해당 인덱스에 해당하는 문자를 반환합니다.

{
"javascript reference".at()       //j
"javascript reference".at(0)      //j
"javascript reference".at(1)      //a
"javascript reference".at(2)      //v
"javascript reference".at(3)      //a
"javascript reference".at(4)      //s
"javascript reference".at(5)      //c
"javascript reference".at(6)      //r
"javascript reference".at(7)      //i
"javascript reference".at(8)      //p
"javascript reference".at(9)      //t
"javascript reference".at(10)     //' '
"javascript reference".at(-1)     //e
"javascript reference".at(-2)     //c
"javascript reference".at(-3)     //n
"javascript reference".at(-4)     //e
"javascript reference".at(-5)     //r
"javascript reference".at(-6)     //e
"javascript reference".at(-7)     //f
"javascript reference".at(-8)     //e
"javascript reference".at(-9)     //r
"javascript reference".at(100)    // undefined     
}

결과 확인하기

javascript reference undefined

01. includes()

문자열에서의 사용 : string.includes(searchString, position)

JavaScript에서 "includes"는 주로 배열(Array)에 사용되는 메서드입니다. 이 메서드는 특정 요소가 배열에 포함되어 있는지 여부를 확인합니다.

{
    const array = [1, 2, 3, 4, 5];

    console.log(array.includes(2)); // true
    console.log(array.includes(6)); // false
}

위의 코드에서 includes 메서드는 배열 array에 2가 포함되어 있는지를 확인하여 true를 반환합니다.
그러나 배열에 6이 포함되어 있지 않으므로 false를 반환합니다.
이 메서드는 일치하는 요소를 찾을 때까지 배열을 순회하며 선형 검색을 수행합니다.
만약 일치하는 요소를 찾으면 즉시 true를 반환하고, 그렇지 않으면 false를 반환합니다.

이것은 배열에 특정 요소가 있는지 여부를 확인하는 간편한 방법 중 하나입니다.

결과 확인하기

02. indexOf()

string.indexOf(searchValue, fromIndex)

JavaScript의 indexOf 메서드는 배열(Array)에서 지정된 요소의 첫 번째 발견된 인덱스를 반환합니다. 만약 배열에 해당 요소가 없으면 -1을 반환합니다.

{
    const array = [1, 2, 3, 4, 5];

    console.log(array.indexOf(3)); // 2
    console.log(array.indexOf(6)); // -1
}

위의 코드에서 indexOf 메서드는 배열 array에서 3이 첫 번째로 발견된 위치의 인덱스를 반환합니다.
따라서 2가 출력됩니다. 그러나 배열에 6이 없으므로 -1이 반환됩니다.

이 메서드는 배열을 처음부터 순회하며 지정된 요소와 일치하는 첫 번째 요소의 인덱스를 찾습니다.
그리고 발견된 인덱스를 즉시 반환합니다. 따라서, indexOf를 호출할 때마다
배열 전체를 검색하지 않습니다. 일치하는 요소를 찾으면 검색을 중지하고 해당 인덱스를 반환합니다.

includes 메서드와 달리 indexOf는 요소의 존재 여부보다는 해당 요소가 배열에서 위치하는 인덱스를 찾는 데 주로 사용됩니다.

결과 확인하기

03. match()

string.match(regexp)

match 메서드는 문자열에서 정규 표현식과 일치하는 부분을 찾아 배열로 반환합니다.
이 때, 정규 표현식이 없으면 전체 문자열이 반환됩니다. 여러 개의 일치 항목이 있는 경우, 이를 모두 배열로 반환합니다.

{
    const str = "The rain in Spain falls mainly in the plain";
    const matches = str.match(/ain/g);

    console.log(matches); // ["ain", "ain", "ain", "ain"]
}

위의 코드에서 /ain/g 정규 표현식은 "ain" 문자열과 일치하는 모든 부분을 찾습니다.
따라서 문자열에서 "ain"이 4번 발견되므로 match 메서드는 해당 부분을 배열로 반환합니다.

정규 표현식을 사용하여 특정 패턴을 검색하고 그에 맞는 부분을 배열로 반환하는 강력한 방법입니다.

결과 확인하기

04. replace()

string.replace(searchValue, newValue)

replace 메서드는 문자열에서 특정 패턴을 찾아 대체합니다.
이 때, 첫 번째로 발견된 패턴만 대체됩니다. 정규 표현식을 사용하여 패턴을 지정할 수도 있습니다.

{
    const str = "Hello World";
    const newStr = str.replace("World", "Universe");

    console.log(newStr); // "Hello Universe"
}

위의 코드에서 "World"는 "Universe"로 대체됩니다. 만약 문자열에 여러 개의 "World"가 있더라도, replace는 첫 번째로 발견된 것만 대체합니다. 이와 같이 replace 메서드를 사용하면 문자열에서 특정 패턴을 찾아 대체할 수 있습니다.

결과 확인하기

05. search()

string.search(regexp)

replace 메서드는 문자열에서 특정 패턴을 찾아 대체합니다.
이 때, 첫 번째로 발견된 패턴만 대체됩니다. 정규 표현식을 사용하여 패턴을 지정할 수도 있습니다.

{
    const str = "Hello World";
    const newStr = str.replace("World", "Universe");

    console.log(newStr); // "Hello Universe"

//정규표현식
    const str = "I have 3 apples and 5 oranges";
    const newStr = str.replace(/\d+/g, "X");

    console.log(newStr); // "I have X apples and X oranges"
}

위의 코드에서 "World"는 "Universe"로 대체됩니다. 만약 문자열에 여러 개의 "World"가 있더라도, replace는 첫 번째로 발견된 것만 대체합니다. 정규 표현식을 사용하여 패턴을 지정할 수도 있습니다. 예를 들어, 모든 숫자를 X로 대체하려면 다음과 같이 할 수 있습니다 위의 코드에서 /\d+/g 정규 표현식은 하나 이상의 숫자를 나타내는 모든 부분을 찾습니다. 그리고 이러한 모든 부분을 "X"로 대체합니다. 이와 같이 replace 메서드를 사용하면 문자열에서 특정 패턴을 찾아 대체할 수 있습니다.

결과 확인하기

06. slice()

arrayOrString.slice(start, end)

slice 메서드는 문자열의 일부분을 추출하여 새로운 문자열을 반환합니다. 시작 인덱스부터 종료 인덱스 직전까지의 부분 문자열을 반환합니다. 음수 인덱스는 끝에서부터의 위치를 나타냅니다.

{
    const str = "Hello World";
    const newStr = str.slice(6);
    
    console.log(newStr); // "World"
}

slice 메서드를 사용하여 문자열 "Hello World"에서 일부분을 추출하는 간단한 예제입니다.
여기서 slice(6)은 문자열의 인덱스 6부터 끝까지의 부분 문자열을 추출합니다.
즉, "World"를 추출하게 됩니다. 그리고 이를 newStr 변수에 할당하고, 이를 콘솔에 출력합니다.
따라서 콘솔에는 "World"가 출력됩니다.
이렇게 문자열에서 일부분을 추출하는 데에 slice 메서드를 사용할 수 있습니다

결과 확인하기

07. substring()

string.substring(indexStart, indexEnd)

substring 메서드는 문자열의 일부분을 추출하여 새로운 문자열을 반환합니다.
slice와 비슷하지만 음수 값을 사용할 수 없습니다. 시작 인덱스부터 종료 인덱스 직전까지의 부분 문자열을 반환합니다.

{
    const str = "Hello World";
    const newStr = str.substring(6);

    console.log(newStr); // "World"
}

위의 코드에서 substring(6)은 문자열의 6번 인덱스부터 끝까지의 부분 문자열을 추출합니다. 따라서 "World"가 반환됩니다.
이와 같이 substring 메서드를 사용하여 문자열에서 일부분을 추출할 수 있습니다.

결과 확인하기

08. split()

string.split(separator, limit)

split 메서드는 문자열을 지정된 구분자로 나누어 배열로 반환합니다.
구분자를 기준으로 문자열을 분할하고, 각 부분을 배열의 요소로 반환합니다.
이를 통해 문자열을 특정 패턴에 따라 분할하거나 문자열을 토큰으로 나눌 때 유용하게 사용할 수 있습니다.

{
    const str = "apple,banana,grape";
    const arr = str.split(",");

    console.log(arr); // ["apple", "banana", "grape"]
}

의 코드에서 split(",")는 쉼표(,)를 구분자로 사용하여 문자열을 분할합니다.
결과적으로 "apple", "banana", "grape" 세 개의 요소를 가진 배열이 생성됩니다.
이 배열은 arr 변수에 할당되고, 콘솔에 출력됩니다.

즉, split 메서드를 사용하면 문자열을 구분자를 기준으로 분할하여 배열로 쉽게 변환할 수 있습니다.

결과 확인하기

09. trim()

문자열.trim()

trim 메서드는 문자열 앞뒤의 공백을 제거합니다.

{
    const str = "   Hello World   ";
    const trimmedStr = str.trim();

    console.log(trimmedStr); // "Hello World"
}

위의 코드에서 trim 메서드는 문자열 " Hello World "의 앞뒤의 공백을 제거하여 "Hello World"를 반환합니다.

결과 확인하기