前言
在使用字符串输出时，如果其中存在变量，经常会采用字符串拼接的方法进行。即isName.innrtHTML="姓名："+name+"<br>"
这种方法会有大量的双引号和加号出现，很繁琐，ES6引入了模板字符串进行简化。
同时向大家介绍ES6引进的新字符串方法。
一、模板字符串的使用
1.基本形式
//传统的 isName.innrtHTML="姓名："+name+"<br>"; //模板字符串 isName.innrtHTML=`姓名：${name} <br>`;
2.表示多行字符串
表示多行字符串时，所有空格和缩进都会保存在输出中。
console.log(`How old are you? I am 20.`); //输出就是：How old are you? // I am 20.
3.${}中的大括号看可以放任意Javascript表达式，还可以进行运算及引用对象属性等
var x = 11; var y = 22; console.log(`x=${++x},y=${x+y}`);//12 34
4.可以调用函数
如果函数结果不是字符串，则按照一般的规则转化为字符串
function string() { return 25; } console.log(`How old are you I am ${string()}`);
二、ES6新增方法
1.查找方法
传统的JavaScript只有indexof()和lastindexof()方法，可以返回一个字符串是否包含在另一个字符串中。ES6又提供以下三种方法：
（1）includes(String,index)：返回布尔值。参数String表示要查找的字符串，index表示从源字符串什么位置开始查找。从index位置往后查找是否包含，包含返回true，否则false。
（2）startsWith(String,index)：返回布尔值。表示参数字符串String是否在源字符串的头部，index表示从源字符串开始查找的位置。
（3）endsWith()：返回布尔值。表示参数字符串String是否在源字符串的尾部，index表示从源字符串后面什么位置开始查找。
let str = 'http://www.haoze.edu.cn'; if (str.startsWith('http://')) { console.log(str + "是普通网址"); } else if (str.startsWith('https://')) { console.log(str + "是加密网址"); } let fileName = 'csdn.jpg'; if (fileName.endsWith('.txt')) { console.log(fileName + "是文本文件"); } else if (fileName.endsWith('.jpg')) { console.log(fileName + "是图片文件"); }
2.字符串重复方法
repeat()方法能将源字符串重复N次，并返回一个新的字符串。
注意！如果输入的是小数，向下取整；如果是是NaN，则被当作0；如果是其他值，则会报错
let str = "wcl"; console.log(str.repeat(3)); //wclwclwcl console.log(str.repeat(2.7)); //wclwcl console.log(str.repeat(0.8)); //无显示 console.log(str.repeat(NaN)); //无显示
3.字符串补全方法
padStart()和padEnd()字符串补全长度的方法，如果某个字符串不够指定长度，会在头部或尾部补全。这俩方法都有 俩参数，第一个是补全后的字符串长度；第二个是要补全的字符串，返回的是补全后的字符串。
如果源字符串长度大于第一个参数，则返回源字符串；如果不写第二个参数，则用空格补全到指定长度。
console.log('2'.padStart(2, '0')); //02 console.log('2'.padEnd(2, '0')); //20 console.log('hello'.padStart(4, 'h')); //hello console.log('hello'.padEnd(9, 'wc')); //hellowcwc console.log('hi'.padStart(5)); // hi
如果补全字符串与源字符串超出了补全之后的字符串长度，那么补全字符串超出的部分将会被截取。
console.log('hello'.padEnd(9, 'world'));//helloworl
总结
以上就是ES6模板字符串的讲解和新增方法介绍。
