JavaScript - 여러 줄 문자열, 3가지 방법

자바스크립트에서 문자열을 정의할 때, 여러 줄로 문자열을 정의하는 방법을 소개합니다.

1. +로 여러 문자열 연결

가장 간단한 방법은 + 연산자를 이용하여 여러 문자열을 여러 줄로 쓰고 연결하는 것입니다. +를 연달아 쓰는 것이 불편할 수도 있는데, 출력될 내용을 명확히 정의하기 때문에 직관적인 방법입니다.

const str = 'Hello, ' +
    'World, ' +
    'JavaScript ' +
    '!!!';

console.log(str);

Output:

Hello, World, JavaScript !!!

줄마다 개행을 하고 싶다면 아래 예제와 같이 줄마다 개행 문자인 \n을 추가하시면 됩니다.

const str = 'Hello, \n' +
    'World, \n' +
    'JavaScript \n' +
    '!!!';

console.log(str);

Output:

Hello,
World,
JavaScript
!!!

아래와 같이 Backslash를 입력하여 여러 줄 문자열을 작성할 수 있습니다. 줄바꿈을 하려면 개행 문자를 추가하면 됩니다.

const str = 'Hello, \
World, \
JavaScript \
!!!';

console.log(str);

Output:

Hello, World, JavaScript !!!

주의할 점은, 코드를 보기 좋게 하려고 아래와 같이 Tab을 추가하여 정렬하면, 이 Tab도 문자열로 인식됩니다.

const str = 'Hello, \
    World, \
    JavaScript \
    !!!';

console.log(str);

위 코드 실행 결과를 보시면, 문자열에 Tab이 추가되었습니다. 이런 부분을 감안하고 사용해야 합니다.

Hello,     World,     JavaScript     !!!

Backtick(`)을 사용하여 여러 줄 문자열을 작성할 수 있습니다. 주의할 점은 줄바꿈으로 입력한 엔터도 문자열로 인식됩니다.

const str = `Hello,
World,
JavaScript
!!!`;

console.log(str);

Output:

Hello,
World,
JavaScript
!!!

또한, 코드의 가독성을 위해 Tab을 추가하여 코드를 정렬해도 Tab이 문자열로 인식됩니다. 이런 부분들을 알아두고 사용하셔야 합니다.

const str = `Hello,
    World,
    JavaScript
    !!!`;

console.log(str);

Output:

Hello,
    World,
    JavaScript
    !!!

Loading script...