JavaScript 中反引号字符 （'） 的用法

这是一项称为模板文本的功能。

在 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 like RajiniKanth
// 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"

^{（例如，下面：一个 name 变量入定义 template-literal 的作用域中保存的值;在 foo 函数的作用域中分配另一个值将不起作用）}

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

我们可以在这里使用点差运算符来传递多个值。第一个参数（我们称之为字符串）是所有纯字符串（任何插值表达式之间的内容）的数组。

然后，我们使用 将所有后续参数收集到一个名为 values 的数组中，尽管您当然可以将它们保留为字符串参数后面的单个命名参数，就像我们上面所做的那样（、 等）。... gather/rest operatorvalue1value2

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

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

收集到我们的 values 数组中的参数是在字符串文字中找到的已计算的插值表达式的结果。标记的字符串文本类似于在计算插值之后但在编译最终字符串值之前的处理步骤，从而可以更好地控制从文本生成字符串。让我们看一个创建可重用模板的示例。

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

如您所见，字符串的原始版本保留了转义序列，而字符串的处理版本将其视为未转义的真实换行符。ECMAScript 6 带有一个内置函数，可以用作字符串文字标签： .它只是通过字符串的原始版本：\nString.raw(..)

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

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

反引号 （） 用于定义模板文字。模板文字是 ECMAScript 6 中的一项新功能，它使处理字符串变得更加容易。`

特征：

• 我们可以在模板文字中插入任何类型的表达式。
• 它们可以是多行的。

注意：我们可以轻松地在反引号 （） 中使用单引号 （） 和双引号 （）。'"`

例：

var nameStr = `I'm "Alpha" Beta`;

要插入变量或表达式，我们可以使用符号。${expression}

var name = 'Alpha Beta';
var text = `My name is ${name}`;
console.log(text); // My name is Alpha Beta

多行字符串意味着您不再需要用于新行。\n

例：

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

输出：

Hello Alpha!
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}.`);

与 vanilla JavaScript：

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}
• 例如，以 开头的十六进制转义\x\xA9
• 例如，以 和 （a） 数字开头的八进制文字转义\\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 除外）都本机支持模板字符串文本。因此，在生产代码中使用是非常安全的。可以在此处找到更详细的浏览器兼容性列表。

好的部分是我们可以直接进行基本数学运算：

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>

除了字符串插值之外，还可以使用反引号调用函数。

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

// To call this function using ``

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

// Or
sayHello`
    some args
`;

检查样式化的组件。他们大量使用它。

这是一个非常有用的功能，例如，这里有一个 Node.js 代码片段，用于测试 3 秒计时函数的设置。

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

解释

1. 将等待时间声明为 3000
2. 使用反引号，您可以将“等待时间”除以 1000 的计算结果嵌入到所选文本的同一行中。
3. 使用“waitTime”常量进一步调用计时器函数将导致 3 秒延迟，如 console.log 参数中计算的那样。

您也可以制作模板的模板，并达到私有变量。

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

很多评论回答了您的大部分问题，但我主要想为这个问题做出贡献：

有没有一种方式使反引号的行为实际上与单个引号的行为不同？

我注意到模板字符串的一个区别是无法将模板字符串设置为对象属性。更多信息在这篇文章中;公认答案中的一句有趣的话：

模板字符串是表达式，而不是文本1。

但基本上，如果你想将它用作对象属性，你必须使用它，并用方括号括起来。

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

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

反引号字符 （）* 字符，而不是单引号 （'） 或双引号 （“）。) *in JavaScript is used to define template literals. A template literal is a special type of string that allows you to embed expressions, which are evaluated and included in the final string. They are denoted by being surrounded by the backtick (

下面是使用模板文本在字符串中嵌入表达式的示例：

const name = "Akila";
const message = `Hello, ${name}!`;
console.log(message); // Output: Hello, Akila!

在上面的示例中，表达式被计算并包含在最终字符串中，该字符串被分配给消息变量。${name}

模板文本还提供了一些方便的功能，例如多行字符串和字符串插值。多行字符串允许您在字符串中包含换行符，这对于创建格式化文本特别有用。

下面是将多行字符串与模板文本一起使用的示例：

const message = `This is a

多行字符串。 控制台.log（消息）;

输出 这是一个 多行字符串。总之，JavaScript 中的反引号字符 （'） 用于定义模板文字，这是在 JavaScript 代码中包含表达式和多行字符串的便捷方法。