JavaScript 템플릿 리터럴
동의어:
- 템플릿 리터럴
- 템플릿 문자열
- 문자열 템플릿
- 백틱 구문
백틱 구문
템플릿 리터럴 은 따옴표("") 대신 역따옴표(``)를 사용하여 문자열을 정의합니다.
예시
let text = `Hello World!`;
문자열 안의 따옴표
템플릿 리터럴 을 사용 하면 문자열 안에 작은따옴표와 큰따옴표를 모두 사용할 수 있습니다.
예시
let text = `He's often called "Johnny"`;
여러 줄 문자열
템플릿 리터럴 은 여러 줄 문자열을 허용합니다.
예시
let text =
`The quick
brown fox
jumps over
the lazy dog`;
보간
템플릿 리터럴 은 변수와 표현식을 문자열로 보간하는 쉬운 방법을 제공합니다.
이 방법을 문자열 보간이라고 합니다.
구문은 다음과 같습니다.
${...}
변수 대체
템플릿 리터럴 은 문자열에 변수를 허용합니다.
예시
let firstName = "John";
let lastName = "Doe";
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>`;
브라우저 지원
Template LiteralsES6 기능(JavaScript 2015)입니다.
모든 최신 브라우저에서 지원됩니다.
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
Template LiteralsInternet Explorer에서는 지원되지 않습니다.
완전한 문자열 참조
전체 문자열 참조를 보려면 다음으로 이동하십시오.
참조에는 모든 문자열 속성 및 메서드에 대한 설명과 예가 포함되어 있습니다.