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

Question

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

var s = `abc`;

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

Answer 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)}`);

Answer 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);

Как видите, мы использовали ` вокруг серии символов, которые интерпретируются как строковый литерал, но любые выражения вида ${..} разбираются и оцениваются inline немедленно.

Одним из действительно приятных преимуществ интерполированных строковых литералов является то, что им разрешено разбивать несколько строк:

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хотя вы, конечно, могли бы оставить их как отдельные именованные параметры после параметра 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"

Answer 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?

Answer 4

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

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

// To call this function using ``

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

// Or
sayHello`
    some args
`;

Отметьте стилизованный компонент. Они активно этим пользуются.

Answer 5

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

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

Answer 6

Резюме:

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

Совместимость браузера:

Строковый литерал шаблона изначально поддерживается всеми основными поставщиками браузеров (кроме Internet Explorer). Так что это довольно безопасно для использования в вашем рабочем коде. Более подробный список совместимых браузеров можно найти здесь.

Answer 7

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

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>

Answer 8

Символ обратной кавычки ()* вместо одинарных (') или двойных кавычек (").

Вот пример использования литерала шаблона для встраивания выражения в строку:

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

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

Вот пример использования многострочной строки с литералом шаблона:

      const message = `This is a

многострочная строка.`;console.log(сообщение);

вывод Это многострочная строка.В заключение, символ обратной кавычки (`) в JavaScript используется для определения литералов шаблонов, которые являются удобным способом включения выражений и многострочных строк в ваш код JavaScript.

Answer 9

Многие комментарии отвечают на большинство ваших вопросов, но в основном я хотел внести свой вклад в этот вопрос:

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

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

Строки шаблона - это выражения, а не литералы1.

Но в основном, если вы когда-либо хотели использовать его как свойство объекта, вам нужно было бы использовать его в квадратных скобках.

      // Throws error
const object = {`templateString`: true};

// Works
const object = {[`templateString`]: true};

Answer 10

Вы также можете создать шаблон из шаблонов и достичь частной переменной.

var a= {e:10, gy:'sfdsad'}; //global object

console.log(`e is ${a.e} and gy is ${a.gy}`); 
//e is 10 and gy is sfdsad

var b = "e is ${a.e} and gy is ${a.gy}" // template string
console.log( `${b}` );
//e is ${a.e} and gy is ${a.gy}

console.log( eval(`\`${b}\``) ); // convert template string to template
//e is 10 and gy is sfdsad

backtick( b );   // use fonction's variable
//e is 20 and gy is fghj

function backtick( temp ) {
  var a= {e:20, gy:'fghj'}; // local object
  console.log( eval(`\`${temp}\``) );
}

Answer 11

Это довольно полезная функция, например, вот фрагмент кода Node.js для проверки настройки 3-секундной функции синхронизации.

const waitTime = 3000;
console.log(`setting a ${waitTime/1000} second delay`);

Объяснение

1. Объявить время ожидания как 3000
2. Используя обратную кавычку, вы можете встроить результат вычисления "времени ожидания", деленного на 1000, в одну строку с выбранным вами текстом.
3. Дальнейший вызов функции таймера с использованием константы waitTime приведет к 3-секундной задержке, рассчитанной в аргументе console.log.