es6中的模版字符串

目录

• 字符串拼接
  • es5方式
  • es6方式
  • 自定义标签的模版字符串
• includes()
• startsWith()
• endsWith()
• padStart()

es6中的模版字符串替代了原有的字符串拼接功能。

字符串拼接

es5方式

传统的字符串拼接在变量的左右两侧都要有+号连接。

let  name  =  '张三';
let  age  =  9;
let  str  =  '我的名字叫'  +  name  +  '我今年'  +  age  +  '岁了';
console.log(str)//我的名字叫张三我今年9岁了

如果你还想在这个字符串中加入空格回车或者其他的特殊字符，那代码就变得更难以维护，因为还需要加入转义字符才能正常显示。看下面的例子：

//我的名字叫'张三'我今年9岁了
let  name  =  '张三';
let  age  =  9;
let  str  =  '我的名字叫\''  +  name  +  '\'我今年'  +  age  +  '岁了';
console.log(str)

es6方式

还是同样的代码，我们用es6的模版字符串形式就变得容易多了。模版字符串的开始和结束不再使用引号包裹，而是使用‘`’,变量也采用了‘${变量名}’的方式，省去了拼接时的加号和特殊字符的转义。

let  name  =  '张三';
let  age  =  9;
// let str = '我的名字叫\'' + name + '\'我今年' + age + '岁了';
let  str  =  `我的名字叫'${name}'我今年${age}岁了`
console.log(str)

而在常用需求中使用的换行回车也可以直接使用而不需要再进行拼接。

let  name  =  '张三';
let  age  =  9;
let str=`<ul>
    <li>${name}<li>
    <li>${age}<li>
</ul>`
console.log(str);
/*
<ul>
    <li>张三<li>
    <li>9<li>
</ul>
*/

自定义标签的模版字符串

在日常工作处理中，经常会遇到在每个变量之间加一个标识的需求。如下面的例子

• let name = '张三';let age = 9;
• 我的名字叫张三我今年9岁了
• 我的名字叫**张三**我今年**9**岁了

上面的案例中，在变量name和age的左右两侧都加入了两个星号，这个时候自定义模版字符串标签就能够很好的解决上面的问题了。

• 首先要在模版字符串的前面放一个函数名，这个函数就是用来自定义标签的方法名

let  str  =  strfun`我的名字叫${name}我今年${age}岁了`;//strfun是个方法

• 然后用这个函数返回一个新的字符串，这个字符串就是你处理的结果，他会覆盖str原来的值

let  name  =  '张三';
let  age  =  9;
function  ni() {
var  strs  =  arguments[0];
var  vals  = [].slice.call(arguments, 1)
//console.log(strs, vals)
var  str  =  '';
for (var  i  =  0; i  <  vals.length; i++) {
str  +=  strs[i] +  "**"  +  vals[i] +  "**";
}
str  +=  strs[strs.length  -  1];
return  str;
}
let  str  =  ni`我的名字叫${name}我今年${age}岁了`;
console.log(str);

其中接收到的参数是一个数组加上一个类数组的字符串，第一个数组是除了变量名之外的内容，后面的内容是变量名。

includes()

查找一个字符串中是否包含某个字符。

let  str  =  '我的名字叫张三我今年9岁了';
console.log(str.includes('名字'))//true

startsWith()

判断是不是以某个字符开头。

let  str  =  '我的名字叫张三我今年9岁了';
console.log(str.startsWith('名字'))//false

endsWith()

判断是不是以某个字符结尾的

let  str  =  '我的名字叫张三我今年9岁了';
console.log(str.endsWith('名字'))//false

padStart()

字符串补全。按照一定的字符串长度进行补全，补全内容放在字符串前面

//在字符串h的前面补0，成为一个length为2的字符串。
let  h  =  '1';
console.log(h.padStart(2, 0))//01