JavaScript 문자열 템플릿

동의어：

  • Template Literals
  • Template Strings
  • String Templates
  • 백-틱 문법

백-틱 문법

템플릿 리터얼반퀘스트 (``) 대신 쿼테이션 ("")를 사용하여 문자열을 정의합니다：

예제

let text = `Hello World!`;

직접 시험해 보세요

문자열 내의 쿼테이션

사용하여템플릿 리터얼，문자열 내에서 동시에 단락과 더블 쿼테이션을 사용할 수 있습니다：

예제

let text = `He's often called "Johnny"`;

직접 시험해 보세요

다중 행 문자열

템플릿 리터얼다중 행 문자열을 허용합니다：

예제

let text =
``The quick
brown fox
jumps over
the lazy dog`;

직접 시험해 보세요

삽입

템플릿 리터얼변수와 표현식을 문자열에 삽입하는 간단한 방법을 제공합니다.

이 메서드는 문자열 삽입(string interpolation)라고 합니다.

문법

${...}

변수 대체

템플릿 리터얼문자열 내의 변수를 허용합니다：

예제

let firstName = "Bill";
let lastName = "Gates";
let text = `Welcome ${firstName}, ${lastName}!`;

직접 시험해 보세요

실제 값을 자동으로 변수를 대체하는 것을문자열 삽입.

표현식 대체

템플릿 리터얼문자열 내의 표현식을 허용합니다：

예제

let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

직접 시험해 보세요

실제 값을 자동으로 표현식을 대체하는 것을 문자열 삽입이라고 합니다.

HTML 템플릿

예제

let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}
html += `</ul>`;

직접 시험해 보세요

브라우저 지원

인터넷 익스플로러는 지원하지 않습니다템플릿 리터얼.

템플릿 리터얼을 완전히 지원하는 첫 번째 브라우저 버전은:

크롬 IE 파이어폭스 사파리 오페라
크롬 41 에지 13 파이어폭스 34 사파리 10 오페라 29
2015년 3월 2015년 11월 2014년 12월 2016년 9월 2015년 4월

완전한 문자열 참조

완전한 참조를 원하시면, 우리의 완전한 JavaScript 문자열 참조 매뉴얼.

이 매뉴얼은 모든 문자열 속성 및 메서드의 설명과 예제를 포함하고 있습니다.