ES6`백틱을 구분 기호로 사용하여 새로운 유형의 문자열 리터럴이 나타납니다 . 이러한 리터럴을 사용하면 기본 문자열 보간 표현식이 포함 된 다음 자동으로 구문 분석되고 평가됩니다.
let actor = {name: 'RajiniKanth', age: 68};
let oldWayStr = "<p>My name is " + actor.name + ",</p>\n" +
"<p>I am " + actor.age + " old</p>\n";
let newWayHtmlStr =
`<p>My name is ${actor.name},</p>
<p>I am ${actor.age} old</p>`;
console.log(oldWayStr);
console.log(newWayHtmlStr);
보시다시피, 문자열 리터럴로 해석되는 일련의 문자 주위에 ..``를 사용했지만 형식의 모든 표현식은 ${..}즉시 인라인으로 구문 분석되고 평가됩니다.
보간 된 문자열 리터럴의 정말 좋은 이점 중 하나는 여러 줄로 나눌 수 있다는 것입니다.
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 );
보간 된 식
함수 호출, 인라인 함수 표현식 호출 및 기타 !를 포함하여 모든 유효한 표현식이 ${..}보간 된 문자열 내부 에 나타날 수 있습니다 .lit‐ eralinterpo‐ lated string literals
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 );
여기에서 내부 $ {who} s ''보간 된 문자열 리터럴은 "s"who + "s"가 아닌 who 변수를 문자열 과 결합 할 때 우리에게 약간 더 편리했습니다 . 또한 메모를 유지하는 것은 보간 된 문자열 리터럴이 lexically scoped표시되는 위치 dynamically scoped이며 어떤 식으로도 표시되지 않습니다 .
function foo(str) {
var name = "foo";
console.log( str );
}
function bar() {
var name = "bar";
foo( `Hello from ${name}!` );
}
var name = "global";
bar();
template literalHTML에를 사용하는 것은 성가심을 줄임으로써 확실히 더 읽기 쉽습니다.
평범한 옛날 방식 :
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
와 함께 ES6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- 문자열은 여러 줄에 걸쳐있을 수 있습니다.
- 인용 문자를 이스케이프 할 필요가 없습니다.
- ' ">'와 같은 그룹화를 피할 수 있습니다.
- 더하기 연산자를 사용할 필요가 없습니다.
태그가 지정된 템플릿 리터럴
또한 template문자열에 태그를 지정할 수 있습니다 . template문자열에 태그가 지정되면 literals및 대체가 결과 값을 반환하는 함수에 전달됩니다.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`;
function myTaggedLiteral(strings,value,value2) {
console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
우리는 spread여기 연산자 여러 값을 전달할 수 있습니다. 첫 번째 인수 (문자열이라고 함)는 모든 일반 문자열 (보간 된 표현식 사이의 항목)의 배열입니다.
그런 다음 모든 후속 인수를를 사용하여 값이라는 배열로 수집합니다. ... gather/rest operator물론 위에서했던 것처럼 strings 매개 변수 다음에 개별 명명 된 매개 변수로 남겨 둘 수도 있습니다 (value1, value2 etc).
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
argument(s)문자열 리터럴 검색된 이미 평가 보간 수식의 결과 값이 우리의 배열로되어 모였다. A tagged string literal는 보간이 평가 된 후 최종 문자열 값이 컴파일되기 전의 처리 단계와 같으므로 리터럴에서 문자열 생성을 더 잘 제어 할 수 있습니다. .NET Framework를 생성하는 예를 살펴 보겠습니다 re-usable templates.
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입니다 array. 그러나 추가 데이터 비트가 포함되어 있습니다. 모든 문자열의 처리되지 않은 원시 버전입니다. 다음 .raw과 같이 속성을 사용하여 이러한 원시 문자열 값에 액세스 할 수 있습니다 .
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello\nWorld`;
보시다시피 raw, 문자열 의 버전은 이스케이프 된 \ n 시퀀스를 유지하는 반면, 처리 된 버전의 문자열은 이스케이프되지 않은 실제 줄 바꿈처럼 처리합니다. ES6문자열 리터럴 태그로 사용할 수있는 내장 함수가 함께 제공됩니다 : String.raw(..). 단순히의 원시 버전을 통과합니다 strings.
console.log( `Hello\nWorld` );
console.log( String.raw`Hello\nWorld` );