[javascript] JavaScript에서 백틱 문자 (`) 사용

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"

답변

var nameStr = `I'm "Rohit" Jindal`;

var name = 'Rohit Jindal';
var text = `My name is ${name}`;
console.log(text); // My name is Rohit Jindal

const name = 'Rohit';
console.log(`Hello ${name}!
How are you?`);

Hello Rohit!
How are you?

`\`` === '`'; => true

console.log(`string text line 1
string text line 2`);

console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

console.log('string text line 1\n' +
'string text line 2');

console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');

const name = 'Willem';
const age = 26;

const story = `
  My name is: ${name}
  And I'm: ${age} years old
`;

console.log(story);

var sayHello = function () {
    console.log('Hello', arguments);
}

// To call this function using ``

sayHello`some args`; // Check console for the output

// Or
sayHello`
    some args
`;

let nuts = 7

more.innerHTML = `

<h2>You collected ${nuts} nuts so far!

<hr>

Double it, get ${nuts + nuts} nuts!!

`

<div id="more"></div>

function nuts(it){
  return `
    You have ${it} nuts! <br>
    Cosinus of your nuts: ${Math.cos(it)} <br>
    Triple nuts: ${3 * it} <br>
    Your nuts encoded in BASE64:<br> ${btoa(it)}
  `
}

nut.oninput = (function(){
  out.innerHTML = nuts(nut.value)
})

<h3>NUTS CALCULATOR
<input type="number" id="nut">

<div id="out"></div>