Использование символа backtick (`) в JavaScript

В JavaScript обратный тик ^†, кажется, работает так же, как одиночная кавычка. Например, я могу использовать обратную косую черту, чтобы определить такую ​​строку:

var s = `abc`;

Есть ли способ, которым поведение backtick на самом деле отличается от поведения одиночной кавычки?

^{† Обратите внимание, что среди программистов «backtick» - это одно из названий того, что обычно называют серьезным акцентом . Программисты также иногда используют альтернативные имена "backquote" и "backgrave". Кроме того, в переполнении стека и в других местах другие распространенные варианты написания слов "backtick" - это "back-tick" и "back tick".}

Эта функция называется шаблонными литералами .

Они назывались «шаблонными строками» в предыдущих выпусках спецификации ECMAScript 2015.

Шаблонные литералы поддерживаются в Firefox 34, Chrome 41 и Edge 12 и выше, но не в Internet Explorer.

• Примеры: http://tc39wiki.calculist.org/es6/template-strings/
• Официальная спецификация: ECMAScript 2015 Спецификация языка, 12.2.9 Шаблон Буквенные Лексические Компоненты (немного суховато)

Шаблонные литералы могут использоваться для представления многострочных строк и могут использовать «интерполяцию» для вставки переменных:

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"

Backticks ( `) используются для определения литералов шаблона. Шаблонные литералы - это новая функция в 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}.`);

против ванильного JavaScript:

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

или

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

Escape-последовательности:

• \uНапример, экранирование Unicode, начатое\u00A9
• Экранирование кодовой точки Unicode, обозначенное \u{}, например,\u{2F804}
• Шестнадцатеричные побеги, начатые \x, например,\xA9
• Восьмеричные литералы начинаются с \и (а) цифр (ов), например\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>