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

JavaScript에서 백틱 는 작은 따옴표와 같은 것으로 보입니다. 예를 들어, 백틱을 사용하여 다음과 같은 문자열을 정의 할 수 있습니다.

var s = `abc`;

백틱의 동작이 실제로 작은 따옴표의 동작과 다른 방법이 있습니까?


† 프로그래머들 사이에서 “백틱 (backtick)”은 더 일반적으로 억음 악센트 라 불리는 것의 하나의 이름입니다 . 프로그래머는 때때로 “backquote”와 “backgrave”라는 대체 이름을 사용하기도합니다 . 또한 스택 오버플로 및 다른 곳에서 “backtick”에 대한 다른 일반적인 철자는 “back-tick”및 “back tick”입니다.



답변

이것은 템플릿 리터럴 이라고하는 기능 입니다.

ECMAScript 2015 사양의 이전 버전에서는 “템플릿 문자열”이라고했습니다.

템플릿 리터럴은 Firefox 34, Chrome 41 및 Edge 12 이상에서 지원되지만 Internet Explorer에서는 지원되지 않습니다.

템플릿 리터럴은 여러 줄 문자열을 나타내는 데 사용할 수 있으며 “보간”을 사용하여 변수를 삽입 할 수 있습니다.

var a = 123, str = `---
   a is: ${a}
---`;
console.log(str);

산출:

---
   a is: 123
---

더 중요한 것은 변수 이름뿐만 아니라 JavaScript 표현식을 포함 할 수 있다는 것입니다.

var a = 3, b = 3.1415;

console.log(`PI is nearly ${Math.max(a, b)}`);


답변

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"


답변

백틱 ( `)은 템플릿 리터럴을 정의하는 데 사용됩니다. 템플릿 리터럴은 ECMAScript 6의 새로운 기능으로 문자열을보다 쉽게 ​​사용할 수 있습니다.

풍모:

  • 템플릿 리터럴에서 모든 종류의 표현식을 보간 할 수 있습니다.
  • 여러 줄이 될 수 있습니다.

참고 : 백틱 ( ) 안에 작은 따옴표 ( ')와 큰 따옴표 ( ")를 쉽게 사용할 수 있습니다 `.

예:

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

변수 나 표현식을 보간하기 위해 그 ${expression}표기법을 사용할 수 있습니다 .

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

여러 줄 문자열은 더 이상 \n새 줄에 더 이상 사용할 필요 가 없음을 의미합니다 .

예:

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

산출:

Hello Rohit!
How are you?


답변

백틱은 이전에 템플릿 문자열로 알려진 템플릿 리터럴을 묶습니다. 템플릿 리터럴은 포함 된 식과 문자열 보간 기능을 허용하는 문자열 리터럴입니다.

템플릿 리터럴에는 자리 표시 자에식이 포함되어 있으며 식 주위에 달러 기호와 중괄호로 표시됩니다 ${expression}. 자리 표시 자 / 표현식이 함수에 전달됩니다. 기본 함수는 문자열을 연결합니다.

백틱을 피하려면 백 슬래시를 앞에 넣으십시오.

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

여러 줄 문자열을보다 쉽게 ​​작성하려면 백틱을 사용하십시오.

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

또는

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

vs. 바닐라 자바 ​​스크립트 :

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

또는

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

이스케이프 시퀀스 :

  • 유니 코드는 시작 기약 \u예를 들어,\u00A9
  • 유니 코드 코드 포인트로 나타낸 기약 \u{}\u{2F804}
  • \x예를 들어 16 진수 이스케이프는\xA9
  • \예를 들어 및 (a) 숫자로 시작된 8 진수 리터럴 이스케이프\251

답변

요약:

JavaScript의 백틱은 쉬운 동적 문자열을 만들기 위해 ECMAScript 6 // ECMAScript 2015에 도입 된 기능입니다. 이 ECMAScript 6 기능은 템플릿 문자열 리터럴 이라고도 합니다 . 일반 문자열과 비교할 때 다음과 같은 장점을 제공합니다.

  • 템플릿 문자열에서 줄 바꿈이 허용되므로 여러 줄이 될 수 있습니다. ''또는로 선언 된 일반 문자열 리터럴 ""에는 줄 바꿈이 허용되지 않습니다.
  • ${myVariable}구문 을 사용하여 변수 값을 문자열에 쉽게 보간 할 수 있습니다 .

예:

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

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

console.log(story);

브라우저 호환성 :

템플릿 문자열 리터럴은 Internet Explorer를 제외한 모든 주요 브라우저 공급 업체에서 기본적으로 지원합니다. 따라서 프로덕션 코드에서 사용하기에 상당히 절약됩니다. 브라우저 호환성에 대한 자세한 목록은 여기를 참조하십시오 .


답변

문자열 보간 이외에도 백틱을 사용하여 함수를 호출 할 수 있습니다.


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>