Использование символа обратной черты (') в JavaScript?

Ответ 1

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

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

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

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

Ответ 2

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\ go</a>'
'</div>';

С ECMAScript 6:

'<div class="${className}">
  <p>${content}</p>
  <a href="${link}">Let 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, хотя вы, конечно, могли бы оставить их как отдельные именованные параметры после параметра strings, как мы делали выше (value1, value2, etc.),

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"

Ответ 3

Backticks (`) используются для определения шаблонных литералов. Литералы шаблонов - это новая функция в ES6, облегчающая работу со строками.

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

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

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

Пример:

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?

Ответ 4

Обратные метки заключают литералы шаблона, ранее известные как строки шаблона. Шаблонные литералы - это строковые литералы, которые допускают встроенные выражения и функции интерполяции строк.

Шаблонные литералы имеют выражения, встроенные в заполнители, обозначенные знаком доллара и фигурными скобками вокруг выражения, то есть ${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-последовательности:

• Unicode-экранирование, запускаемое \u, например \u00A9
• Кодовая точка Unicode выходит за \u{2F804} обозначенные \u{}, например, \u{2F804}
• Шестнадцатеричные \xA9 с \x, например \xA9
• Восьмеричные литералы начинаются с \ и (а) цифр (-ов), например \251

Ответ 5

Резюме:

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

Ответ 6

Хорошая часть в том, что мы можем сделать основные математику напрямую:

let nuts = 7

more.innerHTML = '

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

<hr>

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

'

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

Ответ 7

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

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

// to call this function using ''

sayHello'some args'; // check console for the output

// or
sayHello'
    some args
';

Проверьте стилизованный компонент, они интенсивно его используют.