[javascript] ES6 템플릿 리터럴 대 연결 문자열

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 );
// Now is the time for all good men
// to come to the aid of their
// country!

보간 된 식

함수 호출, 인라인 함수 표현식 호출 및 기타 !를 포함하여 모든 유효한 표현식이 ${..}보간 된 문자열 내부 에 나타날 수 있습니다 .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 );
// A very WARM welcome
// to all of you READERS!

여기에서 내부 $ {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(); // "Hello from 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`; //["test"]

function myTaggedLiteral(strings,value,value2) {
  console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
// ["test ", " ", ""]
// "Neat"
// 5

우리는 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}`;
// ["test ", " ", ""]
// ["Neat", 5]

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` );
/* "Hello
World" */

console.log( String.raw`Hello\nWorld` );
// "Hello\nWorld"