ECMAScript 6은 백틱을 구분자로 사용하여 새로운 유형의 문자열 리터럴을 제공합니다. 이 리터럴을 사용하면 기본 문자열 보간 표현식을 포함시킬 수 있으며, 그런 다음 자동으로 구문 분석되고 평가됩니다.
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting + "\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
보시다시피 `문자열 리터럴로 해석되는 일련의 문자를 사용 했지만 양식의 모든 표현식은 ${..}즉시 인라인으로 구문 분석되고 평가됩니다.
보간 된 문자열 리터럴의 장점 중 하나는 여러 줄로 나눌 수 있다는 것입니다.
var Actor = {"name": "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log(text);
// Now is the time for all good men
// to come to the aid of their
// country!
보간 된 표현식
${..}함수 호출, 인라인 함수 표현식 호출 및 기타 보간 된 문자열 리터럴을 포함하여 보간 된 문자열 리터럴에 유효한 식을 표시 할 수 있습니다 !
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper("warm")} welcome
to all of you ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!
내부 `${who}s`보간 문자열 리터럴은 who변수를 "s"문자열 과 결합 할 때보 다 편리 합니다 who + "s". 또한 보간 문자열 리터럴은 동적으로 범위가 지정되지 않고 표시되는 위치에서 어휘 범위가 지정됩니다.
function foo(str) {
var name = "foo";
console.log(str);
}
function bar() {
var name = "bar";
foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"
HTML을 위해 템플릿 리터럴을 사용하는 것은 성가심을 줄임으로써 확실히 더 읽기 쉽습니다.
평범한 옛날 방식 :
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
ECMAScript 6으로 :
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- 문자열은 여러 줄에 걸쳐있을 수 있습니다.
- 따옴표 문자를 이스케이프 처리하지 않아도됩니다.
- 다음과 같은 그룹화를 피할 수 있습니다 : ' ">'
- 더하기 연산자를 사용할 필요는 없습니다.
태그가 지정된 템플릿 리터럴
템플릿 문자열에 태그를 지정할 수도 있습니다. 템플릿 문자열에 태그를 지정하면 리터럴과 대체가 함수에 전달되어 결과 값을 반환합니다.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings, value, value2) {
console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
여기서 스프레드 연산자를 사용하여 여러 값을 전달할 수 있습니다. 첫 번째 인수 (문자열이라고 함)는 모든 일반 문자열 (보간 된 표현식 사이의 항목)의 배열입니다.
우리는 다음을 사용하여 배열이라는 값으로 모든 후속 인수를 모아 ... gather/rest operator당신이 과정의 수 위에서처럼 매개 변수 문자열 (다음 개별라는 이름의 매개 변수로 남아있다하더라도, value1, value2, 등).
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
값 배열에 수집 된 인수는 문자열 리터럴에있는 이미 평가 된 보간 표현식의 결과입니다. 태그가 지정된 문자열 리터럴은 보간이 평가 된 후 최종 문자열 값이 컴파일되기 전에 처리 단계와 유사하므로 리터럴에서 문자열 생성을보다 강력하게 제어 할 수 있습니다. 재사용 가능한 템플릿을 만드는 예를 살펴 보겠습니다.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
원시 문자열
태그 함수는 strings라는 첫 번째 인수를받습니다. 그러나 모든 문자열의 처리되지 않은 원시 버전과 같은 추가 데이터가 포함됩니다. 다음 .raw과 같이 속성을 사용하여 해당 원시 문자열 값에 액세스 할 수 있습니다 .
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
보시다시피, 원시 버전의 문자열은 이스케이프 된 \n시퀀스를 유지하는 반면, 처리 된 버전의 문자열은 이스케이프되지 않은 실제 줄 바꿈처럼 취급합니다. ECMAScript 6에는 문자열 리터럴 태그로 사용할 수있는 내장 함수가 제공됩니다 String.raw(..). 단순히 문자열의 원시 버전을 통과합니다.
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"