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

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

---

Ecma-Script-6에 대한 다음 코드가 있습니다. template literals

let person = {name: 'John Smith'};   
let tpl = `My name is ${person.name}.`;    
let MyVar="My name is "+ person.name+".";

console.log("template literal= "+tpl);  
console.log("my variable = "+MyVar);

출력은 다음과 같습니다.

template literal= My name is John Smith.
my variable = My name is John Smith.

이것은 바이올린입니다. 나는 정확한 차이점을 검색했지만 찾을 수 없었습니다. 제 질문은이 두 진술의 차이점은 무엇입니까?

  let tpl = `My name is ${person.name}.`;    

과

  let MyVar = "My name is "+ person.name+".";

이미 여기에 문자열을 MyVar연결할 person.name수 있으므로 템플릿 리터럴을 사용하는 시나리오는 무엇입니까?

---

`Hello ${person.name}`질문의 예에서와 같이 자리 표시 자 (예 :)와 함께 템플릿 리터럴 만 사용 하는 경우 결과는 문자열을 연결하는 것과 동일합니다. 주관적으로는 특히 여러 줄 문자열 또는 둘 모두를 포함하는 문자열을 위해, 더 나은 외모와 읽기 쉽게 '그리고 "당신은 더 이상 그 문자를 이스케이프 할 필요가 없기 때문에.

가독성은 훌륭한 기능이지만 템플릿에서 가장 흥미로운 점은 태그 가 지정된 템플릿 리터럴입니다 .

let person = {name: 'John Smith'}; 
let tag = (strArr, name) => strArr[0] + name.toUpperCase() + strArr[1];  
tag `My name is ${person.name}!` // Output: My name is JOHN SMITH!

이 예제의 세 번째 줄에서는 이름 tag이 지정된 함수 가 호출됩니다. 템플릿 문자열의 내용은 tag함수 의 인수에서 액세스 할 수있는 여러 변수로 분할됩니다 . 리터럴 섹션 (이 예에서는 strArr[0]is My name is의 값과 strArr[1]is 의 값 !) 및 대체 ( John Smith). 템플릿 리터럴은 tag함수가 반환 하는 모든 항목으로 평가됩니다 .

ECMAScript를 위키 자동 탈출 또는 입력 또는 제이션을 코딩 같이 나열 몇 가지 가능한 사용 사례. msg다음과 같이 리터럴 부분을 조회 My name is하고 현재 로케일의 언어 (예 : 독일어) 로의 번역으로 대체하는 이름 이 지정된 태그 함수를 만들 수 있습니다 .

console.log(msg`My name is ${person.name}.`) // Output: Mein Name ist John Smith.

태그 함수가 반환하는 값은 문자열이 아니어도됩니다. $다음 예제 와 같이 문자열을 평가하고이를 쿼리 선택기로 사용하여 DOM 노드 컬렉션을 반환 하는 태그 함수를 만들 수 있습니다 .

$`a.${className}[href=~'//${domain}/']`

---

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

We can use the spread operator here to pass multiple values. The first argument — we called it strings — is an array of all the plain strings (the stuff between any interpolated expressions).

we then gather up all subsequent arguments into an array called values using the ... gather/rest operator, though you could of course have left them as individual named parameters following the strings parameter like we did above (value1, value2 etc).

function myTaggedLiteral(strings,...values) {
  console.log(strings);
  console.log(values);    
}

let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5

The argument(s) gathered into our values array are the results of the already evaluated interpolation expressions found in the string literal. A tagged string literal is like a processing step after the interpolations are evaluated but before the final string value is compiled, allowing you more control over generating the string from the literal. Let's look at an example of creating a 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);

Raw Strings

our tag functions receive a first argument we called strings, which is an array. But there’s an additional bit of data included: the raw unprocessed versions of all the strings. You can access those raw string values using the .raw property, like this:

function showraw(strings, ...values) {
 console.log( strings );
 console.log( strings.raw );
}
showraw`Hello\nWorld`;

As you can see, the raw version of the string preserves the escaped \n sequence, while the processed version of the string treats it like an unescaped real new-line. ES6 comes with a built-in function that can be used as a string literal tag: String.raw(..). It simply passes through the raw versions of the strings:

console.log( `Hello\nWorld` );
/* "Hello
World" */

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

---

It's a lot cleaner and as stated in the comments, is a common features in another languages. The other thing that I found nice was the line breaks, very useful when writing strings.

let person = {name: 'John Smith', age: 24, greeting: 'Cool!' };

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);

---

While, my answer does not directly address the question. I thought it may be of some interest to point out one drawback of using template literals in favor of array join.

Lets say I have

let patient1 = {firstName: "John", lastName: "Smith"};
let patient2 = {firstName: "Dwayne", lastName: "Johnson", middleName: "'The Rock'"};

So some patients have a middleName and others do not.

If I wanted a string representing the full name of a patient

let patientName = `${patient1.firstName} ${patient1.middleName} ${patient1.lastName}`;

Then this would become "John undefined Smith"

However if I did

let patientName = [patient1.firstName, patient1.middleName,  patient1.lastName].join(" ");

Then this would become just "John Smith"

EDIT

General_Twyckenham pointed out that a join on " " would result in an extra space between "John" and "Smith".

To get around this you can have a filter before the join to get rid of falsy values: [patient1.firstName, patient1.middleName, patient1.lastName].filter(el => el).join(" ");

참고URL : https://stackoverflow.com/questions/27565056/es6-template-literals-vs-concatenated-strings