ES6模板: 字符串的语法和例子

迪鲁宾
443 阅读2分钟

在这篇文章中，我将用实例记录es6的特性--模板字符串字面意义 Es6引入了模板字面意义的特性。这是一个多行字符串初始化的语法变化。

如何在Es5中创建模板字符串示例

字符串是一组用单引号或双引号括起来的字符/词。如果你想在字符串中添加变量，添加字符串是非常困难的，因为字符串需要串联和添加变量。

var name = 'Frank';
var message = 'Hello ' + name + ',  How are you doing?';

使用这种方法，字符串操作是一项繁琐的工作，而且发生错误的可能性更大。

字符串是用单引号或双引号括起来的。

在Es6中，对字符串字面意义的插值引入了反符号。

Es6模板字符串字元示例

同样的代码可以用一个简单的方法来重写，即使用回文符号

var name = 'Frank';
var message = `Hello ` + name + `,  How are you doing?`;
console.log(message); // Hello Frank,  How are you doing?

模板和标签字词字符串介绍

Es6声明了字符串并为interpolation,Expressions,Multi-line strings 增加了特定领域的语法。有两种类型的模板字词模板字词这些是字符串字词，允许字符串插值和多行标签模板字词这些是函数调用，包含通过模板字符串传递的参数

字符串插值表达式示例

下面的模板字符串包含占位符。美元符号和大括号用于动态地放置变量值。这被称为插值

var m = 10;
var n = 4;
console.log(`Sum  is ${m + n}`)

多行字符串创建示例

在ES6之前，我们曾经通过添加换行符来声明多行字符串。

String msg="Template strings are introduced in es6.\n Developer friendly for declaring string literals"

在ES6中，我们将重写同样的内容，如下所示

String msg=`Template strings are introduced in es6.
Developer friendly for declaring string literals`;

只需要定义一个字符串字面，并将其与单独的连线用回文符号（`....`）括起来。两个字符串例子的输出都是一样的。

标签模板字符串例子

标签模板允许你用模板字符串调用一个函数 该函数有两个参数 第一个参数是一个值数组 第二个参数是其余的插值变量 函数返回被操作的字符串作为输出

var name= 'Tom';
var salary = 5000;
function myfunction(stringsarray, nameExpression, salaryExpression) {
  var array0 = stringsarray[0]; // Employee
  var array1 = stringsarray[1];  // salary is
  return `${array0}${nameExpression}${array1}${salaryExpression}`;
}
var result = myfunction`Employee ${ name } salary is  ${salary }`;
console.log(result);

上述代码执行的输出是

Employee Tom salary is  5000

字符串raw()方法示例

这是一个静态方法，用于从模板字符串字面意义中获得原始字符串。所以转义字符的解释被忽略，并返回相同的句法

String.raw`templateString`


var str =`Temlate \n String `
console.log(str)
var rawString = String.raw`Template \n String `
console.log(rawString)
var name = 'Frank';
var rawString1 = String.raw`Hi\n${name}, How are you doing?`;
console.log(rawString1);

上述代码的执行结果是

Temlate
 String
Template \n String
Hi\nFrank, How are you doing?

转义字符的解释被忽略。插值表达式将不会被忽略。

avatar
文章
阅读
粉丝