JavaScript | String Methods

이번 글에선 String intstances의 methods를 다뤄보겠습니다.

참고로 길이를 구하는 length는 문자열 객체의 속성이기 때문에 함수를 호출하지 않고 그냥 "string".length의 형태로 사용하면 됩니다.

또한 HTML wrapper methods라 하여 HTML tag를 바로 만들어 주는 메소드가 있지만 현재의 웹 환경에서는 권장하지 않기 때문에 HTML wrapper methods는 다루지 않겠습니다.

중요한 점은, 문자열은 변경 불가능(immutable)한 원시 값(primitive value)이기 때문에 String 객체의 모든 메소드는 언제나 새로운 문자열을 반환한다는 것입니다.

본 글에서 다루는 String methods는 ‘펼치기’를 눌러 확인할 수 있습니다.

펼치기

• String.prototype.charAt()
• String.prototype.indexOf()
• String.prototype.lastIndexOf()
• String.prototype.charCodeAt()
• String.prototype.codePointAt()
• String.prototype.normalize()
• String.prototype.includes()
• String.prototype.startsWith()
• String.prototype.endsWith()
• String.prototype.localeCompare()
• String.prototype.concat()
• String.prototype.substring()
• String.prototype.slice()
• String.prototype.repeat()
• String.prototype.padStart()
• String.prototype.padEnd()
• String.prototype.trim()
• String.prototype.search()
• String.prototype.match()
• String.prototype.matchAll()
• String.prototype.replace()
• String.prototype.split()
• String.prototype.toString()
• String.prototype.toLowerCase()
• String.prototype.toUpperCase()
• String.prototype.valueOf()

charAt / indexOf / lastIndexOf

String.prototype.charAt(index)

index에 위치한 문자를 반환합니다. index가 문자열의 길이를 벗어났을 경우엔 빈 문자열을 반환합니다.

String.prototype.indexOf(searchValue[, fromIndex])

문자열에서 처음으로 등장하는 searchValue의 위치를 반환하며 문자열에 searchValue가 없을 시 -1을 반환합니다. fromIndex를 사용하여 검색을 시작할 위치를 지정해줄 수 있습니다.

String.prototype.lastIndexOf(searchValue[, fromIndex])

문자열의 뒤에서부터 처음으로 등장하는(맨 마지막에 있는) searchValue의 위치를 반환하며 문자열에 searchValue가 없을 시 -1을 반환합니다. fromIndex를 사용하여 검색을 시작할 위치를 뒤에서부터 fromIndex 번째로 지정해줄 수 있습니다.

charCodeAt / codePointAt / normalize

String.prototype.charCodeAt(index)

index에 위치한 문자의 UTF-16 코드를 반환합니다. 이를 통해 ASCII코드를 얻을 수도 있습니다. index가 문자의 길이를 벗어난다면 NaN을 반환합니다.

String.prototype.codePointAt(pos)

pos에 위치한 문자의 UTF-16 코드를 반환하며 pos에 어떤 값도 없을 시엔 undefined를 반환합니다.

String.prototype.normalize([form])

주어진 문자열에 Unicode Normalization 처리를 한 문자열을 반환합니다.

includes / startsWith / endsWith

String.prototype.includes(searchString[, position])

문자열에 searchString이 있는지 여부를 판단합니다. 있다면 true를, 없다면 false를 반환하며 position으로 검색을 시작하는 위치를 설정할 수 있습니다.

String.prototype.startsWith(searchString[, position])

문자열이 searchString으로 시작하는지 여부를 판단합니다. searchString으로 시작한다면 true를, 아니면 false를 반환하며 position으로 시작 위치를 설정할 수 있습니다.

String.prototype.endsWith(searchString[, position])

문자열이 searchString으로 끝나는지 여부를 판단합니다. searchString으로 끝난다면 true를, 아니면 false를 반환하며 position으로 끝 위치를 설정할 수 있습니다.

let str = 'Rolling stone gathers no moss';
str.includes('no');           // true;
str.includes('yes');          // false;

str.startsWith('Roll');       // true;
str.startsWith('stone');      // false;
str.startsWith('stone', 8);   // true;

str.endsWith('moss');         // true;
str.endsWith('moss', 3);      // false;

localeCompare

String.prototype.localeCompare(compareString[, locales[, options]])

두 문자열을 비교해서 같다면 0, 사전 순으로 compareString이 먼저 나오면 양수, 뒤에 나오면 음수를 반환합니다.

let str1 = 'aaa'
let str2 = 'bbb'
let str3 = 'bbc'

str2.localeCompare(str1);     // 1  (str2 - str1)
str2.localeCompare(str2);     // 0  (str2 - str2)
str2.localeCompare(str3);     // -1 (str2 - str3)

concat / substring / slice

String.prototype.concat(str[, ...strN])

문자열 뒤에 입력 받은 문자열을 붙여 새로운 문자열을 반환합니다.

String.prototype.substring(begin[, end])

begin와 end 사이에 있는 문자열을 반환합니다. substr()의 사용은 권장되지 않습니다.

String.prototype.slice(begin[, end])

begin와 end 사이에 있는 문자열을 반환합니다.

substring vs. slice

Commons

• 추출하는 문자열의 범위는 begin 이상 end 미만입니다. [begin, end)
• begin와 end의 기본값은 각각 문자열의 시작과 끝입니다.
• NaN을 입력받으면 0으로 처리합니다.

Differences

1. substring
   • begin === end 이면 빈 문자열을 반환하고, begin > end 이면 두 값을 바꿔서 substring()을 합니다.
   • 입력한 인덱스 값이 0보다 작으면 0으로, 문자열의 길이보다 크면 마지막 인덱스로 값을 처리합니다.
2. slice
   • being >= end 이면 빈 문자열을 반환합니다.
   • 입력한 인덱스 값이 0보다 작으면 문자열의 뒤에서 입력한 인덱스 번째가 그 위치가 되며, 문자열의 길이보다 크면 마지막 인덱스로 값을 처리합니다.

let str1 = 'abc';
let str2 = 'def';
str1.concat(str2);        // 'abcdef'

let str = '0123456789';
str.substring();          // '0123456789'
str.slice();              // '0123456789'

str.substring(2, 7);      // '23456'
str.slice(NaN, 5);        // '01234'  str.slice(0, 5);

str.substring(7, 2);      // '23456'  str.substring(2, 7);
str.substring(3, 3);      // ''
str.substring(-5, 15);    // '0123456789'  str.substring(0, str.length - 1);

str.slice(7, 2);          // ''
str.slice(3, 3);          // ''
str.slice(-5, 15);        // '56789'  str.slice(str.length - 5, str.length - 1);

repeat / padStart / padEnd

String.prototype.repeat(count)

문자열이 count번 만큼 반복되는 문자열을 반환합니다.

String.prototype.padStart(targetLength[, padString])

현재의 문자열 앞에 padString이 반복적으로 오는, 길이가 targetLenth인 문자열을 반환합니다.

String.prototype.padEnd(targetLength[, padString])

현재의 문자열 뒤에 padString이 반복적으로 오는, 길이가 targetLenth인 문자열을 반환합니다.

let chorus = "Because I'm happy. "
chorus.repeat(5);
// "Because I'm happy. Because I'm happy. Because I'm happy. Because I'm happy. Because I'm happy. "

let name = 'PARK JUNGHYUK';
let last4Chars = name.slice(-4);
last4Chars.padStart(name.length, '*');    // "*********HYUK"

let first4Chars = name.slice(0, 4);
first4Chars.padEnd(name.length, '*');     // "PARK*********"

trim

String.prototype.trim()

앞뒤에 있는 공백문자들을 제거한 문자열을 반환합니다.

String.prototype.trimStart() / String.prototype.trimLeft()

앞쪽(왼쪽)에 있는 공백문자들을 제거한 문자열을 반환합니다.

String.prototype.trimEnd() / String.prototype.trimRight()

뒷쪽(왼쪽)에 있는 공백문자들을 제거한 문자열을 반환합니다.

search / match / matchAll / replace

String.prototype.search(regexp)

문자열과 regexp이 첫번째로 일치하는 부분의 맨 앞 위치를 반환합니다. 일치하는 부분이 없을 땐 -1을 반환합니다.

String.prototype.match(regexp)

regexp와 일차하는 문자열을 반환합니다. 단, regexp에 /g flag(global flag)를 붙였을 경우, 일치하는 모든 문자열을 배열로 반환하며 /g flag를 붙이지 않았을 경우엔 일치하는 맨 첫 문자열만을 반환합니다. 일치하는 결과가 없을 때엔 null을 반환합니다.

String.prototype.matchAll(regexp)

regexp와 일치하는 문자열을 모두 반환합니다. 하지만 regexp에 /g flag가 없을 경우 TypeError가 발생합니다.

search(), match(), matchAll()의 parameter는 정규표현식(regular expression)이며, 문자열 같이 정규표현식이 아닌 객체가 들어오게 되면 정규표현식으로 형변환 합니다.

String.prototype.replace(searchFor, replaceWith)

문자열에서 searchFor와 일치하는 부분을 replaceWith으로 바꿔줍니다. 만약 searchFor가 정규표현식이라면 일치하는 모든 결과를 바꿔주지만 문자열이라면 일치하는 맨 앞의 결과 만을 바꿔줍니다. 또한 replaceWith에는 문자열이나 함수가 올 수 있습니다.

let str = 'ABCDEFG abcdefg';
str.search(/b..e/gi);           // 1
str.match(/b..e/gi);            // ["BCDE", "bcde"]
str.replace(/b..e/gi, '   ');   // "A    FG a    fg"

split / toString

String.prototype.split([seperator[, limit])

seperator를 기준으로 쪼갠 문자열로 구성된 배열을 반환합니다. seperator는 문자열이나 정규표현식이 올 수 있으며 seperator가 빈 문자열이라면 한 글자 씩으로 쪼개진 배열을 얻을 수 있습니다. limit를 입력한다면 배열의 크기가 limit일 때까지만 split()을 수행합니다.

String.prototype.toString()

객체를 텍스트 값으로 표시하는 문자열을 반환합니다.

let str = "How are you doing?";
str.split(' ');       // ["How", "are", "you", "doing?"]
str.split(/\s/);      // ["How", "are", "you", "doing?"]
str.split();          // ["How are you doing?"]
str.split('', 8);     // ["H", "o", "w", " ", "a", "r", "e", " "]

Number(1234).toString();    // "1234"

toLowerCase / toUpperCase

String.prototype.toLowerCase()

모든 문자를 소문자로 변환한 문자열을 반환합니다.

String.prototype.toUpperCase()

모든 문자를 대문자로 변환한 문자열을 반환합니다.

String.prototype.toLocaleLowerCase([...locale])

지정한 locale에서 모든 문자를 소문자로 변환한 문자열을 반환합니다.

String.prototype.toLocaeUpperCase([...locale])

지정한 locale에서 모든 문자를 대문자로 변환한 문자열을 반환합니다.

valueOf

string.portotype.valueOf()

문자열 객체의 primitive value를 반환합니다.

References

String - JavaScript | MDN

String | PoiemaWeb

Back to top ↑