JavaScript / 문자열 만들기, 따옴표와 템플릿 리터럴 사용법

JavaScript 문자열(string)은 글자들이 이어진 값입니다. 작은따옴표('), 큰따옴표("), 백틱(`)으로 만들며 typeof 결과는 "string"입니다. 따옴표 안의 따옴표, 역슬래시, 줄바꿈을 올바르게 표현해야 원하는 문자가 들어갑니다.

작은따옴표와 큰따옴표

같은 내용을 작은따옴표 또는 큰따옴표로 감싸도 문자열 값은 같습니다. 밖을 작은따옴표로 감쌌다면 안쪽의 큰따옴표는 그대로 쓸 수 있고, 반대도 가능합니다. 문자열의 경계를 만드는 따옴표와 내용에 포함되는 따옴표를 구분하세요.

const first = '안녕하세요';
const second = "안녕하세요";
console.log(first === second); // true

const quoted = '그가 "시작"이라고 말했다.';
const apostrophe = "It's ready.";

문자열 값을 표현하는 따옴표 종류는 값의 일부가 아닙니다. 빈 문자열 ""도 문자열이며, 숫자처럼 보이는 "12"와 숫자 12는 자료형이 다릅니다. MDN의 String 설명에서 문자열 기본형과 문자열 객체의 차이를 확인할 수 있습니다.

이스케이프 문자로 따옴표·역슬래시 넣기

밖과 같은 종류의 따옴표를 내용에 넣으려면 역슬래시(\)로 이스케이프합니다. 역슬래시 문자 자체를 넣으려면 \\를 입력합니다. \n은 화면에 보이는 역슬래시와 n이 아니라 실제 줄바꿈을 나타냅니다.

const both = '그가 "It\'s ready"라고 말했다.';
const path = 'C:\\notes\\work';
const twoLines = '첫 줄\n둘째 줄';

console.log(both);     // 그가 "It's ready"라고 말했다.
console.log(path);     // C:\notes\work
console.log(twoLines); // 두 줄로 출력

예를 들어 경로를 'C:\notes'처럼 한 번만 입력하면 \n이 줄바꿈으로 해석됩니다. 화면에 출력한 값과 코드에 적힌 형태를 구분하려면 JSON.stringify(value)로 이스케이프된 표기를 함께 확인할 수 있습니다. 문자열 리터럴의 허용 문자와 이스케이프 규칙은 MDN의 문자열 리터럴 문법을 참고하세요.

백틱으로 변수와 여러 줄 사용하기

백틱으로 감싼 템플릿 리터럴에서는 ${...} 안의 표현식 값을 문자열에 넣을 수 있습니다. 실제 줄바꿈도 그대로 포함할 수 있어 여러 줄 문구를 만들 때 편리합니다. 단순한 문자열을 만든다는 점은 같지만 변수 삽입과 줄바꿈 방식이 다릅니다.

const name = '지민';
const greeting = `안녕, ${name}님`;
console.log(greeting); // '안녕, 지민님'

const lines = `첫 줄
둘째 줄`;
console.log(lines); // 실제 두 줄로 출력

템플릿 리터럴로 만들었다고 HTML 출력이 자동으로 안전해지는 것은 아닙니다. 사용자가 입력한 문구를 화면에 보여 줄 때는 예제처럼 textContent를 사용해 텍스트로 표시하세요. MDN의 템플릿 리터럴 문서에 표현식 삽입 규칙이 정리되어 있습니다.

전체 예제: 문자열 값을 눈으로 비교하기

아래 코드를 UTF-8로 string-example.html에 저장하고 브라우저에서 엽니다. 목록에서 종류를 바꾸면 실제 문자열 값, JSON.stringify()로 표시한 표기, typeof 결과를 한 화면에서 비교할 수 있습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>문자열 표기 비교</title>
</head>
<body>
<label for="sample">문자열 예제</label>
<select id="sample">
  <option value="single">작은따옴표</option>
  <option value="double">큰따옴표</option>
  <option value="both">두 종류의 따옴표</option>
  <option value="path">역슬래시가 있는 경로</option>
  <option value="newline">줄바꿈</option>
  <option value="template">템플릿 리터럴</option>
</select>
<button id="reset" type="button">처음으로</button>
<pre id="output" aria-live="polite"></pre>
<script>
const name = '지민';
const samples = {
  single: 'It\'s ready.',
  double: "그가 \"시작\"이라고 말했다.",
  both: '그가 "It\'s ready"라고 말했다.',
  path: 'C:\\notes\\work',
  newline: '첫 줄\n둘째 줄',
  template: `안녕, ${name}님`
};

const select = document.querySelector('#sample');
const output = document.querySelector('#output');
function show() {
  const value = samples[select.value];
  output.textContent = `값:\n${value}\n\nJSON 표기: ${JSON.stringify(value)}\n자료형: ${typeof value}`;
}
select.addEventListener('change', show);
document.querySelector('#reset').addEventListener('click', () => {
  select.value = 'single';
  show();
});
show();
</script>
</body>
</html>

‘역슬래시가 있는 경로’를 선택하면 값에는 C:\notes\work가 보이고 JSON 표기에는 역슬래시가 두 번씩 보입니다. ‘줄바꿈’은 값이 실제 두 줄로 표시되지만 JSON 표기에는 \n으로 나타납니다. ‘처음으로’를 누르면 작은따옴표 예제로 되돌아갑니다. 원래 글의 정적 화면 캡처 대신 이 예제에서 각 결과를 직접 바꿔 확인할 수 있습니다.