Что такое dosomething` & lt; h1 & gt; `в JavaScript? [Дубликат]

Backticks (`) используются для определения шаблонных литералов.

Особенности:

• мы можем интерполировать любые выражения в шаблонных литералах.
• Они могут быть многострочными.

Примечание: мы можем легко использовать одинарные кавычки (') и двойные кавычки (") внутри обратных шагов (`) .

Пример:

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

Multi-line Строки означают, что вам больше не нужно использовать \n для новых строк.

Пример:

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

Выход:

Hello Rohit!
How are you?

ES6 предлагает новый тип строкового литерала, используя обратный тик в качестве разделителя. Эти литералы позволяют встроить встроенные интерполяционные выражения строки, которые затем автоматически анализируются и оцениваются.

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

С ES6:

`<div class="${className}">
  <p>${content}</p>
  <a href="${link}">Let's go</a>
</div>`

• Ваша строка может охватывать несколько строк.
• Вам не нужно скрывать символы котировки.
• Вы можете избежать группировок, таких как: '">'
• Вам не нужно использовать оператор plus.

Литералы с метками шаблонов

Мы также можем пометить строку шаблона, когда тега шаблона помечена, литералы и подстановки передаются функции, которая возвращает результирующее значение.

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 etc).

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

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

Аргумент (ы), собранный в наши значения array - это результаты уже оцененных интерполяционных выражений, найденных в строковом литерале. Идентифицированный строковый литерал похож на этап обработки после вычисления интерполяций, но до того, как окончательное значение строки будет скомпилировано, что позволит вам более эффективно управлять строкой из литерала. Давайте посмотрим на пример создания повторно используемых шаблонов.

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

наши функции тега получают первый аргумент, который мы назвали строками, который является массивом. Но есть дополнительный бит данных: необработанные необработанные версии всех строк. Вы можете получить доступ к этим исходным строковым значениям, используя свойство .raw, например:

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

Как вы можете видеть, необработанная версия строки сохраняет escape-последовательность \n, а обработанная версия строки ссылается на него как на неэксклюзивную новую новую строку. ES6 поставляется со встроенной функцией, которая может использоваться как тег строкового литерала: String.raw(..). Он просто проходит через исходные версии строк:

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

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

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

• Примеры: http://tc39wiki.calculist.org/es6/template-strings/
• Официальная спецификация: ES 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)}`);

Поддерживается с Firefox 34 и Chrome 41.

Backticks заключают литералы шаблонов, p.k.a. Шаблоны. Литералы шаблонов являются строковыми литералами, которые позволяют встроенные выражения и функции интерполяции строк.

Литералы шаблонов имеют выражения, вложенные в заполнители, обозначенные знаком доллара и фигурными скобками вокруг выражения, то есть ${expression}. Заполнитель / выражения передаются функции. Функция по умолчанию просто конкатенирует строку.

Чтобы избежать обратного хода, поставьте перед ним обратную косую черту:

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

Используйте обратные элементы для более легкой записи многострочной строки:

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

или

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

vs. vanilla JS:

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

или

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

Последовательности выхода:

• Эскапады Unicode начинаются с \u, например \u00A9
• Эскизы кодовой точки Unicode, обозначенные \u{}, например \u{2F804}
• Шестнадцатеричные escape-последовательности, начатые с помощью \x, например \xA9
• Octal буквальные escape-последовательности, начатые символами \ и (a), например \251