[자바스크립트] String에 대해 알아보자.

js string

이번 글또를 위한 포스팅을 위해 자바스크립트에 대한 지식을 공부 겸 포스팅해보려고 합니다. 이번에 알아볼 내용은 자바스크립트 String에 대한 내용입니다. 

자바스크립트에서는 리터럴인 문자열을 다룰 때 사용하는 String이라는 객체가 있습니다. 이 String 객체는 문자열을 생성하거나, 검색, 치환, 추출, 분할 등의 작업을 수행할 수 있는 다양한 메소드를 제공합니다.

이번 포스트에서는 전체적으로 어떤 메소드가 있는지 간략하게 설명하고, 차후 몇몇 메소드에 대한 디테일한 내용을 다뤄볼까 합니다.

 

javascript Property

length

length : 문자열의 길이를 반환합니다.

'hello world'.length // 11

 

javascript Method

at

at(index) : 문자열 내의 특정 인덱스에 있는 문자를 반환합니다.

문자열의 인덱스는 0부터 시작하며, 문자열의 길이보다 큰 숫자를 입력하면 undefined가 반환됩니다.

'Hello World'.at(0); // 'H'
'Hello World'.at(6); // 'W'
'Hello World'.at(11); // undefined

charAt

charAt(index) : 주어진 인덱스에 해당하는 문자를 반환합니다.

만약 입력하는 index가 문자열 범위를 넘어가는 경우 빈 문자열을 반환합니다.

let str = "Hello World";
str.charAt(1); // 'e'
str.charAt(99); // ''
str.charAt(-1); // ''

charCodeAt

charCodeAt(index) : 주어진 인덱스에 해당하는 문자의 UTF-16 코드를 반환합니다. charCodeAt을 통해서 문자열에서 특정 위치의 문자에 대한 Unicode 값을 얻을 수 있습니다.

'hello'.charCodeAt(1) // 101
'와우'.charCodeAt(0); // 50752
'a'.charCodeAt(-1) // NaN
'b'.charCodeAt(10) // NaN

codePointAt

codePointAt(pos) : 문자열의 pos 위치에 있는 문자의 유니코드 코드 포인트 값을 반환합니다.

"Hello, World!".codePointAt(0); // 72

fromCharCode

fromCharCode(unicode) : ASCII 코드 값으로 구성된 숫자 배열을 통해 문자열을 생성하는 기능을 제공합니다.

fromCharCode는 적절한 경우에는 간단하고 편리한 방법으로 문자열을 생성할 수 있습니다. 하지만 유니코드 문자를 처리해야 한다면, String.fromCodePoint() 메소드를 사용하는 것이 더 좋은 방법입니다.

// 65는 A의 ASCII 코드 값
let char = String.fromCharCode(65);
console.log(char); // "A"

// A~Z의 ASCII 코드 값을 가진 문자열 만들기
let str = '';
for (let i = 65; i <= 90; i++) {
  str += String.fromCharCode(i);
}
console.log(str); // "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

fromCodePoint

fromCodePoint(num1[, ...[, numN]]) : 자바스크립트에서 문자열을 생성할 때, 유니코드 코드 포인트 값으로 구성된 숫자 배열을 사용하여 문자열을 생성할 수 있는 기능을 제공하며, ES6 이상에서 사용 가능합니다.

다시 말해 UTF-16의 모든 값을 지원하기 때문에, 다양한 언어의 문자와 이모지 등을 표현하는데 사용할 수 있습니다.

console.log(String.fromCodePoint(72, 101, 108, 108, 111)); // "Hello"
console.log(String.fromCodePoint(128516)); // "😊"
console.log(String.fromCodePoint(0x1F600)); // "😀"
console.log(String.fromCodePoint(119989)); // "💯"

concat

concat(string1, string2, ...) : 여러 개의 문자열을 합쳐서 하나의 문자열로 반환합니다.

let str1 = "Hello";
let str2 = " World";
str1.concat(str2); // "Hello World"

indexOf

indexOf(searchValue, start) : 주어진 값을 찾아 첫 번째로 발견한 인덱스를 반환합니다.

let str = "Hello World";
str.indexOf("World"); // 6
str.indexOf("world"); // -1

lastIndexOf

lastIndexOf(searchValue, start) : 주어진 값을 찾아 마지막으로 발견한 인덱스를 반환합니다.

let str = "Hello World, Hello World";
str.lastIndexOf("World"); // 13
str.lastIndexOf("world"); // -1

localeCompare

localeCompare(compareString, locales, options) : 두 개의 문자열을 비교하여 먼저 오는 문자열이 뭔지 -1, 0, 1로 반환합니다.

• 첫 번째 문자열이 두 번째 문자열보다 앞에 오는 경우 -1을 반환
• 두 번째 문자열이 첫 번째 문자열보다 앞에 오는 경우 1을 반환
• 두 번째 문자열과 첫 번째 문자열이 같은 경우 0을 반환

"apple".localeCompare("banana"); // -1
"banana".localeCompare("apple"); // 1
"apple".localeCompare("apple"); // 0

localeCompare()는 문자열 정렬에 유용하게 사용하고 locale을 고려하여 문자열을 비교합니다. locale은 국가, 언어, 타자기, 날짜 형식, 숫자 형식 등의 정보들을 포함하죠.

예를 들어, 미국과 영국의 영어는 각각 다른 지역 정보를 갖습니다. 그래서 같은 문자열이라도 localeCompare() 메서드를 사용하여 비교할 때 결과가 달라질 수 있습니다.

미국 영어와 영국 영어의 단어 정렬 순서는 다릅니다. "colour"와 "color"는 미국 영어에서는 같은 단어지만, 영국 영어에서는 다릅니다. localeCompare()를 사용하여 비교할 때, "colour"가 "color"보다 앞에 오는 경우가 있습니다.

// 미국은 소문자가 정렬순서 앞, 영국은 대문자가 정렬순서 앞.
var str1 = "civic";
var str2 = "Civic";

str1.localeCompare(str2, 'en-US'); // -1
str1.localeCompare(str2, 'en-GB'); // 1

slice

slice(start, end) : 문자열의 start 위치부터 end 위치 전까지의 문자열을 잘라내어 반환합니다.

let str = "Hello, World!";
str.slice(7, 13); // "World"

substring

substring(start, end) : 주어진 시작 인덱스와 끝 인덱스 사이의 문자열을 추출하여 반환합니다.

let str = "Hello World";
str.substring(3,7); // "lo W"

replace

replace(str, replaceStr) : 문자열에서 searchValue를 replaceValue로 대체하여 새로운 문자열을 반환합니다.

let str = "Hello World";
str.replace("World", "javascript"); // "Hello javascript"

let str = "Hello World";
str.replace(/world/i, "javascript"); // "Hello javascript"

replaceAll

replaceAll(str, replaceStr) : 주어진 정규표현식 또는 텍스트에 해당하는 모든 문자열을 새 문자열로 교체합니다.

let str = "The quick brown fox jumps over the lazy dog.";
let replaced = str.replaceAll("o", "*");
console.log(replaced);
// "The quick br*wn f*x jumps *ver the lazy d*g."

toLowerCase

toLowerCase() : 문자열을 소문자로 변환하여 반환합니다.

let str = "Hello World";
str.toLowerCase(); // "hello world"

toLocaleLowerCase

toLocaleLowerCase() : 각 문자열에 해당하는 문자의 locale에 맞는 소문자로 변환하여 반환합니다.

toLowerCase()와의 차이점은, toLowerCase()는 문자열의 모든 문자를 영어의 소문자로 변환하여 반환하는 반면, toLocaleLowerCase()는 문자열의 문자를 각 문자에 해당하는 locale의 소문자로 변환하여 반환합니다.

let str = "HELLO WORLD";

str.toLocaleLowerCase();  // "hello world"
str.toLocaleLowerCase('de-DE');  // "hello world"
str.toLocaleLowerCase('tr-TR');  // "merhaba dünya"

toUpperCase

toUpperCase() : 문자열을 대문자로 변환하여 반환합니다.

let str = "Hello World";
str.toUpperCase(); // "HELLO WORLD"

toLocaleUpperCase

toLocaleUpperCase() : 각 문자열에 해당하는 문자의 locale에 맞는 대문자로 변환하여 반환합니다.

toUpperCase()와의 차이점은, toUpperCase()는 문자열의 모든 문자를 영어의 대문자로 변환하여 반환하는 반면, toLocaleUpperCase()는 문자열의 문자를 각 문자에 해당하는 locale의 대문자로 변환하여 반환합니다.

let string = "Hello World";
string.toUpperCase(); // HELLO WORLD
string.toLocaleUpperCase("en-GB"); // HELLO WORLD

trim

trim() : 문자열의 앞뒤 공백을 제거하여 반환합니다.

let str = "    Hello World    ";
str.trim(); // "Hello World"

trimStart

trimStart() : 문자열 앞의 공백을 제거합니다.

let str = "   Hello World   ";
str.trimStart(); // "Hello World   "

trimEnd

trimEnd() : 문자열 뒤의 공백을 제거합니다.

let str = "   Hello World   ";
str.trimEnd(); // "   Hello World"

split

split(separator, limit) : 문자열을 separator를 기준으로 분리하여 배열로 반환합니다. limit를 지정하면, 분리할 최대 개수를 지정할 수 있습니다.

let str = "Hello World";
str.split(" "); // ["Hello", "World"]
str.split("", 3); // ["H", "e", "l"]

repeat

repeat(count) : 문자열을 입력받은 count 만큼 반복하여 새로운 문자열을 반환합니다.

let str = "Hello";
str.repeat(3); // "HelloHelloHello"

includes

includes(searchString, start) : 문자열에 searchString이 포함되어 있는지 검사하여 포함되어 있으면 true, 아니면 false를 반환합니다. start를 지정하면, 검색을 시작할 인덱스를 지정 할 수 있습니다.

let str = "Hello World";
str.includes("World"); // true
str.includes("world"); // false
str.includes("World",6); // true

startsWith

startsWith(searchString, length) : 문자열이 지정한 문자열로 시작하는지 확인합니다. 문자열이 지정한 문자열로 시작하면 true를, 아니면 false를 반환합니다. length를 지정하면, 검색을 시작할 인덱스를 지정 할 수 있습니다.

let string = "Hello World";
string.startsWith("Hello"); // true
string.startsWith("HELLO"); // false
string.startsWith("o", 4);  // true
string.startsWith("o", 5);  // false

endsWith

endsWith(searchString, length) : 문자열이 searchString으로 끝나는지 검사하여 끝나면 true, 아니면 false를 반환합니다. length를 지정하면, 검색을 시작할 인덱스를 지정 할 수 있습니다.

let str = "Hello World";
str.endsWith("World"); // true
str.endsWith("world"); // false
str.endsWith("o", 8); // true

match

match(regex) : 문자열에서 정규식과 일치하는 부분을 배열로 반환합니다.

let str = "Hello World";
str.match(/[a-z]/g); // ["e", "l", "l", "o", "o", "r", "l", "d"]

matchAll

matchAll(regex) : 문자열에서 주어진 정규식에 대한 모든 결과를 찾아 배열로 반환합니다. 이 객체의 각 요소는 매치 결과 객체이며, 패턴과 그에 대한 인덱스, 원본 문자열에 대한 정보를 포함합니다.

let str = "Hello World. How are you today?";
let regex = /\b\w+\b/g;
let matchArray = [...str.matchAll(regex)];
console.log(matchArray);
/*
[
  Array(3) ["Hello", index: 0, input: "Hello World. How are you today?"],
  Array(3) [ "World", index: 6, input: "Hello World. How are you today?"],
  Array(3) [ "How", index: 12, input: "Hello World. How are you today?"],
  Array(3) [ "are", index: 16, input: "Hello World. How are you today?"],
  Array(3) [ "you", index: 20, input: "Hello World. How are you today?"],
  Array(3) [ "today", index: 24, input: "Hello World. How are you today?"]
]
*/

padStart

padStart(targetLength, padString) : 문자열의 시작 부분에 padString을 추가하여 targetLength만큼의 길이를 갖도록 합니다.

let str = "Hello World";
str.padStart(15, "hi "); // "hi hi Hello World"

padEnd

padEnd(targetLength, padString) : 문자열의 끝부분에 padString을 추가하여 targetLength만큼의 길이를 갖도록 합니다.

let str = "Hello World";
str.padEnd(15, " hi"); // "Hello World hi hi"

normalize

normalize() : 문자열을 Unicode 정규화 형식으로 변환합니다.

let str = "Å";
str.normalize(); // "A\\u030a"