ES6特性之:模板字符串

简介: 模板字符串为构造多行字符串和字符串拼接带来了更加方便的方式。多行字符串之前,我们如果要构造一个多行,我们需要在字符串中自己加入换行符\n,就像这样:var lines = "text line one\ntext line two";//"text line one//text line two"上面的看起来有点乱,让我们写的再好看直观一点:var lines2 = "text line one\n" + "text line two";可以再怎么写,总是觉得不是很优雅美观,尤其是文本内容比较多的时候。

模板字符串为构造多行字符串字符串拼接带来了更加方便的方式。

多行字符串

之前,我们如果要构造一个多行,我们需要在字符串中自己加入换行符\n,就像这样:

var lines = "text line one\ntext line two";
//"text line one
//text line two"

上面的看起来有点乱,让我们写的再好看直观一点:

var lines2 = "text line one\n" 
           + "text line two";

可以再怎么写,总是觉得不是很优雅美观,尤其是文本内容比较多的时候。模板字符串的出现,极大的改善了这一痛点:

var lines = `
text line one
text line two
`

是不是干净整洁多了?

字符串拼接

模板字符串只所以叫“模板”,当然是因为它支持内嵌表达式,借助这一特性,我们可以很容易的实现字符串拼接:

var name = "Kevin";
var age = 18;

//老的做法:
var message = "Name: " + name + ", Age: " + age;
// Name: Kevin, Age: 18

//模板字符串的做法:
var message2 = `Name: ${name}, Age: ${age}`;

也可以做一些简单的计算:

var num1 = 10;
var num2 = 20;

var result = `${num1} + ${num2} = ${num1 + num2}`;
// 10 + 20 = 30

标签化模板

标签化模板(Tagged Template Literals)是一个高级特性,同一个模板字符串可以通过使用不同的标签,对模板进行进一步处理,输出不同的结果。

var name = "Kevin";

morning`Hello,${name}`;  // Good morning, Kevin
evening`Hello,${name}`;  // Good evening, Kevin

等一下!上面的程序是怎么回事?morning,evening做了什么?

其实,这里的morning,evening就是所谓的标签(Tag)了,它们其实就是一个函数:

function morning(strings, ...values) {
  return "Good morning, " + values[0];
}

function evening(strings, ...values) {
  return "Good evening, " + values[0];
}
  • 标签函数的第一个参数是一个数组,它包含的值是模板字符串中除去表达式的那些部分:
var name = "Kevin";
var age = 18;

//比如我们有如下模板字符串
var template = `Name: ${name}, Age: ${age}`;

//则在标签函数中的第一个参数strings就为:
//strings为 ["Name: ", ", Age: ", ""]
  • 标签函数的第二个参数是个可变参数,它包含了填充模板字符串的那些表达式的值,就按上面的代码例子,那我们的values参数值就为:
// values为 ["Kevin", 18]
目录
相关文章
|
7月前
|
JavaScript 前端开发
ES6的模板字符串使用
ES6的模板字符串使用
74 0
|
7月前
|
JavaScript 前端开发
ES6之模板字符串及字符串新增方法
ES6之模板字符串及字符串新增方法
|
7月前
|
JSON 自然语言处理 JavaScript
ES6 字符串的扩展
ES6 字符串的扩展
|
4月前
|
JavaScript 前端开发
es6-模版字符串
【8月更文挑战第19天】
35 1
ES6学习(3)模板字符串、简化对象和函数写法
ES6学习(3)模板字符串、简化对象和函数写法
|
4月前
|
存储 API
ES6新增语法 扩展运算符
ES6新增语法 扩展运算符
26 0
|
自然语言处理 JavaScript 前端开发
ES6(字符串的扩展)
ES6(字符串的扩展)
96 0
|
7月前
|
JavaScript 前端开发
ES6 什么是模板字符串?
ES6 什么是模板字符串?
|
JavaScript 前端开发
ES6学习(四)—字符串的新增方法
ES6学习(四)—字符串的新增方法