Каково использование символа обратного выступа (`) в JavaScript?

Question

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

var s = `abc`; 

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

Answer 1

Эта функция ECMAScript 6 под названием template строки литы.

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

• Примеры: http://tc39wiki.calculist.org/es6/template-strings/
• Официальные спецификации: ES 2015 Language Specification, 12.2.9 Template Literal Lexical Components (немного сухой)

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

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

Будет ли выход:

--- 
    a is: 123 
--- 

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

Answer 2

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

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

теги шаблон литералы

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

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 

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

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 свойства, например:

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

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

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

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

Answer 3

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

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