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과 마찬가지로¹ 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 ${'`' === `\``}`          // "'`' === `\`` is true"

References

String - JavaScript | MDN

Template literals (Template strings) - JavaScript | MDN

1. JavaScript | 참거짓 값과 Boolean객체 ↩

Back to top ↑