JavaScript | 문자열과 템플릿 리터럴

이번 글에서는 JavaScript의 문자열과 템플릿 리터럴에 대해서 알아보겠습니다.

원래는 메소드들도 같이 정리하고 싶었는데 생각보다 양이 많아져서 메소드들에 관해서는 다음으로 미루겠습니다.

본 글은 MDN 웹 문서 중 String 표준 내장 객체와 Templete literals 페이지를 참고하였습니다.

문자열의 선언

JavaScript에서 문자열을 선언하는 방법으론 문자열 리터럴 형태로 선언하는 방식과 String객체의 생성자를 사용하여 선언하는 방식이 있습니다.

let str1 = 'string literal';
let str2 = String('constructor for string');
let numToStr = String(49);                      // "49"
let nullToStr = String(null);                   // "null"

문자열 리터럴은 문자열 양 옆에 '(따옴표) 혹은 "(쌍따옴표)을 씌워 만들며 immutable한 값이 됩니다.

생성자 String()는 argument로 오는 값들을 문자열로 바꿔줍니다. 예시 코드에서 보듯이 숫자, boolean값, null, undefined 등도 string이 됩니다.

또한, 전에 다뤘던 Boolean과 마찬가지로1 String()은 문자열이 되지만 new 키워드를 사용하여 선언한 String()은 객체가 됩니다.

let str = String('this is string');
typeof str;             // "string"

let obj = new String('this is object');
typeof obj;             // "object"

Templete Literals

ECMAScript(ES6)이후로 템플릿 리터럴로 문자열을 표현할 수 있습니다.

템플릿 리터럴에서는 placeholder를 사용할 수 있으며 문자열을 여러 줄로 쓰는 것 또한 가능합니다.

따옴표 대신 (backtick)을 씌워 문자열을 만들면 템플릿 리터럴로 사용할 수 있습니다.

placeholder

템플릿 리터럴 안에서 $(달러)와 {}(중괄호)를 합쳐 ${expression}의 형태로 사용합니다.

어떻게 보면 C언어의 printf()함수와 유사합니다. %d를 쓰고 문자열 뒤에 정수값을 덧붙이듯이 괄호 안에 태그(변수), 계산식, 함수 등을 넣을 수 있습니다.

템플릿 리터럴이 사용되면 내부적으로는 ${ } 안의 expression과 (backtick)이 둘러싸고 있는 텍스트가 함수에 전달되며 함수는 expression의 값을 텍스트와 concaternate하여 단일의 문자열을 리턴합니다.

let placeholder = 'world';
`hello, ${placeholder}!`        // "hello, world!"

`5 + 8 = ${5 + 8}`              // "5 + 8 = 13"

function fibo(n) {
    if(n === 1 || n === 2) return 1;
    return fibo(n - 1) + fibo(n - 2);
};
`5 + 8 = ${fibo(7)}`            // "5 + 8 = 13"

multi-line strings

문자열이 너무 길어져서 줄바꿈으로 가독성을 높이고 싶을 때 사용하는 방법입니다. 리터럴 문자열 안에서는 줄바꿈이 있더라도 하나의 문자열로 간주합니다.

let pooh = `How lucky I am 
to have something 
that makes saying goodbye so hard.`

물론 리터럴 템플릿 이외에 문자열을 여러 줄로 표시할 수 있는 기존의 방법도 존재합니다.

• 연산자를 이용하거나 \를 문자열의 줄 끝에 붙여주면 됩니다. 단 \를 사용할 때는 \ 뒤에 공백이 오면 SyntaxError가 발생합니다.

let verse = 'Many are the plans in a person’s heart\, ' + 
            'but it is the Lord’s purpose that prevails.';

let shining = 'all play and no work \
makes jack a dull boy'

Backslash Escape

특수문자는 앞에 \를 앞에 붙여 문자열에 적을 수 있습니다.

`'\`' === \`\\\`\` is ${'`' === `\``}`          // "'`'