有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

es6模板字符串(Template String)「ES6基础」模板字符串

javascript 炮渣日记 3周前 (11-15) 24次浏览 已收录 0个评论 扫描二维码
es6模板字符串(Template String)「ES6基础」模板字符串

模板字符串是ES6中非常重要的一个新特性,这个特性使得我们处理相关业务变得更加容易。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用。模板字符串使用反钩号(backticks,`),而不是单引号或双引号。以下是个简单的示例:

let str1 = `hello!!!`; //template string
let str2 = "hello!!!";
console.log(str1 === str2); //output "true”

今天的文章将从以下几个方面进行介绍:

  • 表达式
  • 多行字符串
  • 标签模板字符串(Tagged template literals)
  • 原始字符串(Raw strings)

本篇文章阅读时间预计3分钟

表达式

模板字符串的出现,给ES6添加了“表达式”的概念。在ES6之前,我们只能用加号连接变量表达式,代码如下:

var a = 20;
var b = 10;
var c = "JavaScript";
var str = "My age is " + (a + b) + " and I love " + c;
console.log(str);

自从模板字符串表达式的出现后,我们嵌入表达式的方式更加简单,即${变量表达式},变量表达式就相当函数一样,变量传值进行替换。如果我们要使用自定义的函数处理字符串,我们可以使用标签模板字符串(Tagged template literals),标签函数进行处理(a tag function)。下一小节将会讲到。先让我们看下如何使用模板字符串嵌入表达式,代码如下:

const a = 20;
const b = 10;
const c = "JavaScript";
const str = `My age is ${a+b} and I love ${c}`;
console.log(str);
//output “My age is 30 and I love JavaScript"

标签模板字符串

首先我们先创建一个标记的模板字符串,使用函数处理模板字符串,如下段代码所示:

const tag = function(strings, aPLUSb, aSTARb) {
 // strings is: [ 'a+b equals ', ' and a*b equals ', '' ]
 // aPLUSb is: 30
 // aSTARb is: 200
 return 'SURPRISE!';
};
const a = 20;
const b = 10;
let str = tag `a+b equals ${a+b} and a*b equals ${a*b}`;
console.log(str);

编译器是如何处理这段代码的?第一个参数strings包含所有的静态字符串,以表达式变量进行分割成数组(类似split(‘$’)的效果);然后逐一解析变量表达式,传到对应的参数aPLUSb和aSTARb。

如果我们想修改aPLUSb, aSTARb的值,我们可以在函数内部进行修改:

const tag = function(strings, aPLUSb, aSTARb) {
 // strings is: ['a+b equals', 'and a*b equals']
 // aPLUSb is: 30
 // aSTARb is: 200
 aPLUSb = 200;
 aSTARb = 30;
 return `a+b equals ${aPLUSb} and a*b equals ${aSTARb}`;
};
const a = 20;
const b = 10;
let str = tag `a+b equals ${a+b} and a*b equals ${a*b}`;
console.log(str);
//output “a+b equals 200 and a*b equals 30”

使用此方法我们可以创建灵活度更高的模板字符串,接收后台数据渲染我们前端的界面。

多行字符串

Es6的模板字符串给我们提供了一种创建多行文本字符串的新方法。在ES6之前我们只能使用”n“在字符串中进行换行,代码如下:

console.log("1n2n3");
//output
//1
//2
//3

在es6中,我们可以直接输入回车进行换行,如下段代码所示:

console.log(`1
2
3`);

模板字符串的方法会在每一行的最后添加”n”进行换行。

原始字符串(Raw strings)

原始字符串是一个普通字符串,其中不会解释转义字符。我们可以使用模板字符串创建原始字符串。我们可以使用String.raw来获取原始字符串,代码如下:

let s = String.raw `xyn${ 1 + 1 }z`;
console.log(s); 
//output "xyn2z"

这里的n不被解释成换行符。相反,它是一个由两个字符组成的原始字符串,及“”和“n”,变量S的长度为6。如果我们使用自定义的标签函数处理模板字符串,我们可以使用String.raw方法来获取,代码如下:

let tag = function(strings, ...values) {
 return strings.raw[0]
};
let str = tag `Hello n World!!!`;
console.log(str);”
//output "Hello n World!!!"

但是也有例外(进行转义):

  • 任何以u开头的内容都将被视为Unicode转义
  • 以x开头的任何内容都将被视为十六进制转义
  • 任何以开头然后跟着一个数字将被视为八进制转义

小节

今天的内容就介绍到这里,模板字符串让我们处理字符串更加容易,尤其是我们在渲染前端界面展示数据时,大大减少了代码量,加强了易读性。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址