텍스트 포맷

텍스트 포맷 (Text formatting)

이 장은 JavaScript에서 텍스트 데이터를 표현하고 조작하는 방법을 다룹니다. 문자열(String) 데이터 타입과 문자열 리터럴, 문자열 객체, 그리고 템플릿 리터럴을 소개합니다. (MDN의 해당 원문은 "Numbers and strings" 챕터로 병합되어 이 내용을 포함합니다.)

출처: Text formatting

본문

문자열 (Strings)

JavaScript의 String 타입은 텍스트 데이터를 표현하는 데 사용됩니다. 이는 16비트 부호 없는 정수 값(UTF-16 코드 단위)의 "요소" 집합입니다. String의 각 요소는 String에서 위치를 차지합니다. 첫 번째 요소는 인덱스 0에, 다음은 인덱스 1에, 이런 식입니다. String의 길이는 그 안의 요소 수입니다. 문자열 리터럴이나 문자열 객체를 사용해 문자열을 만들 수 있습니다.

문자열 리터럴

소스 코드에서 단일(') 또는 이중(") 따옴표를 사용해 문자열을 선언할 수 있습니다.

'foo'
"bar"

문자열 리터럴 안에서 대부분의 문자는 문자 그대로 입력할 수 있습니다. 유일한 예외는 백슬래시(\, 이스케이프 시퀀스를 시작), 문자열을 감싸는 데 사용되는 따옴표 문자(문자열을 종료), 그리고 백슬래시가 앞에 오지 않으면 구문 오류가 되는 줄바꿈 문자입니다.

이스케이프 시퀀스를 사용해 더 고급 문자열을 만들 수 있습니다.

십육진 이스케이프 시퀀스

\x 뒤의 숫자는 십육진수로 해석됩니다.

"\xA9" // "©"

유니코드 이스케이프 시퀀스

유니코드 이스케이프 시퀀스는 \u 다음에 최소 네 자리 십육진 숫자가 필요합니다.

"\u00A9" // "©"

유니코드 코드 포인트 이스케이프

유니코드 코드 포인트 이스케이프를 사용하면 십육진수를 사용해 어떤 문자도 이스케이프할 수 있어서 0x10FFFF까지의 유니코드 코드 포인트를 사용할 수 있습니다. 네 자리 유니코드 이스케이프로는 같은 결과를 얻기 위해 서로게이트 절반(surrogate halves)을 별도로 써야 하는 경우가 많습니다.

"\u{2F804}"

// the same with simple Unicode escapes
"\uD87E\uDC04"

String.fromCodePoint() 또는 String.prototype.codePointAt()도 참고하세요.

String 객체

문자열 값에 직접 메서드를 호출할 수 있습니다.

console.log("hello".toUpperCase()); // HELLO

String 값에 사용할 수 있는 메서드는 다음과 같이 분류됩니다.

질의 (Query): 특정 문자열 인덱스의 문자 또는 문자 코드를 가져옵니다. 메서드로는 at(), charAt(), charCodeAt(), codePointAt()이 있습니다.
검색 (Search): 패턴에 부합하는 부분 문자열에 대한 정보를 얻거나 특정 부분 문자열이 존재하는지 테스트합니다. 메서드로는 indexOf(), lastIndexOf(), startsWith(), endsWith(), includes(), match(), matchAll(), search()가 있습니다.
구성 (Composition): 문자열을 더 긴 문자열로 결합합니다. 메서드로는 padStart(), padEnd(), concat(), repeat()이 있습니다.
분해 (Decomposition): 문자열을 더 작은 문자열로 나눕니다. 메서드로는 split(), slice(), substring(), substr(), trim(), trimStart(), trimEnd()이 있습니다.
변환 (Transformation): 현재 문자열 내용에 기반한 새 문자열을 반환합니다. 메서드로는 toLowerCase(), toUpperCase(), toLocaleLowerCase(), toLocaleUpperCase(), normalize(), toWellFormed()이 있습니다.

문자열 작업 시, 문자열 조작에 중요한 기능을 제공하는 두 가지 다른 객체가 있습니다: RegExp와 Intl입니다. 이들은 각각 정규 표현식(regular expressions)과 국제화(internationalization) 장에서 소개됩니다.

템플릿 리터럴 (Template literals)

템플릿 리터럴은 삽입된 표현식(embedded expressions)을 허용하는 문자열 리터럴입니다. 여러 줄 문자열과 문자열 보간(string interpolation) 기능을 사용할 수 있습니다.

템플릿 리터럴은 이중 또는 단일 따옴표 대신 백틱(grave accent) 문자()로 둘러싸여 있습니다. 템플릿 리터럴에는 자리 표시자(placeholder)가 포함될 수 있습니다. 이는 달러 기호와 중괄호(${expression}`)로 표시됩니다.

여러 줄 (Multi-lines)

소스에 삽입된 새 줄 문자는 모두 템플릿 리터럴의 일부입니다. 일반 문자열을 사용하면 여러 줄 문자열을 얻기 위해 다음 문법을 써야 합니다.

console.log(
 "string text line 1\n\
string text line 2",
);
// "string text line 1
// string text line 2"

여러 줄 문자열로 같은 효과를 얻기 위해 이제 다음과 같이 쓸 수 있습니다.

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

삽입된 표현식 (Embedded expressions)

일반 문자열 안에 표현식을 삽입하려면 다음 문법을 사용합니다.

const five = 5;
const ten = 10;
console.log(
 "Fifteen is " + (five + ten) + " and not " + (2 * five + ten) + ".",
);
// "Fifteen is 15 and not 20."

이제 템플릿 리터럴을 사용하면 이런 치환을 더 읽기 쉽게 만드는 문법 설탕을 활용할 수 있습니다.

const five = 5;
const ten = 10;
console.log(`Fifteen is ${five + ten} and not ${2 * five + ten}.`);
// "Fifteen is 15 and not 20."

자세한 내용은 JavaScript 참조 문서의 템플릿 리터럴을 읽어보세요.

텍스트 포맷