JavaScript中反勾号（`）的用法

在JavaScript中，反勾号†似乎与单个引号的作用相同。例如，我可以使用倒勾来定义如下字符串：

var s = `abc`;

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

反勾号的行为与单引号的行为有什么不同吗

---

†请注意，在程序员中，“backtick”是一个更为普遍的名称。程序员有时也会使用“backquote”和“backgrave”。此外，在其他地方，“backtick”的其他常见拼写是“back tick”和“back tick”。

这是一个名为

在ECMAScript 2015规范的早期版本中，它们被称为“模板字符串”

Firefox 34、Chrome 41和Edge 12及以上版本支持模板文本，但InternetExplorer不支持

• 示例：
• 官方规格：（有点干）

模板文字可用于表示多行字符串，并可使用“插值”插入变量：

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

插值表达式

允许任何有效表达式以插值字符串文字出现在

${..}

中，包括函数调用、内联函数表达式调用，甚至其他插值字符串文字

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

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

然后，我们使用

将所有后续参数收集到一个名为values的数组中。。。collect/rest操作符

，当然您可以像上面那样将它们作为字符串参数后面的单独命名参数（

value1

，

value2

，等等）

收集到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);

如您所见，字符串的原始版本保留转义的

\n

序列，而字符串的处理版本将其视为未转义的真正新行。ECMAScript 6带有一个内置函数，可以用作字符串文字标记：

string.raw（..）

。它只是传递字符串的原始版本：

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

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

反勾号（

`

）用于定义模板文本。模板文本是ECMAScript 6中的一项新功能，它使使用字符串更容易

功能：

var nameStr = `I'm "Rohit" Jindal`;

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

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

注意：我们可以很容易地在反勾（

`

）中使用单引号（

”

）和双引号（

“

）

示例：

var nameStr = `I'm "Rohit" Jindal`;

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

要插入变量或表达式，我们可以使用

${expression}

表示法

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

多行字符串意味着您不再需要对新行使用

\n

示例：

var nameStr = `I'm "Rohit" Jindal`;

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

输出：

var nameStr = `I'm "Rohit" Jindal`;

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

你好，罗希特！
你好吗？

反勾号包含模板文字，以前称为模板字符串。模板文字是允许嵌入表达式和字符串插值功能的字符串文字

模板文字具有嵌入在占位符中的表达式，由美元符号和表达式周围的花括号表示，即

${expression}

。占位符/表达式将传递给函数。默认函数仅连接字符串

要避开反勾号，请在其前面加上反斜杠：

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

使用反勾号可以更轻松地写入多行字符串：

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

或

与香草JavaScript相比：

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

或

转义序列：

• Unicode转义由

  \u

  启动，例如

  \u00A9

• Unicode代码点转义由

  \u{}

  指示，例如

  \u{2F804}

• 由

  \x

  启动的十六进制转义，例如

  \xA9

• 八进制文字转义由

  \

  和（a）位开始，例如

  \251

总结： JavaScript中的Backticks是ECMAScript 6//ECMAScript 2015中引入的一项功能，用于生成简单的动态字符串。此ECMAScript 6功能也称为模板字符串文字。与普通字符串相比，它具有以下优点：

• 模板中的字符串允许换行符，因此可以是多行的。普通字符串文字（用

  '

  或

  '

  声明）不允许有换行符
• 我们可以使用

  ${myVariable}

  语法轻松地将变量值插入字符串

例子：

const name='Willem'；
常数年龄=26；
康斯特故事=`
我的名字是：${name}
我是：${age}岁
`;
console.log(
const waitTime = 3000;
console.log(`setting a ${waitTime/1000} second delay`);

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

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

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