ES6学习笔记之--字符串模版

ES6对字符串新增了操作，最重要的就是字符串模版，我们不用再像ES5中那样去拼接变量，而且还支持模版里有简单的计算操作。

字符串模版

先来看看在es5中字符串拼接操作

let content = "javascript";
let str = "I love " + content + " and html";
console.log(str);

ES5中我们必须使用**+ content +**的形式进行拼接，这样复杂，而且容易出错，ES6中不在需要使用单引号，而是使用``，这样的连接号，变量的拼接则是通过${content}，这样的的形式，下面我们对上面的代码进行改造

let content = 'javascript';
let str = `I love ${content} and html`;
console.log(str);

可以看到输出了同样的结果，而且这里面是支持html标签的，我们来试试

let content = 'javascript';
let str = `I love<br/> <b>${content}</b> <br/>and html`;
document.write(str);

对运算符的支持

let a = 1;
let b = 2;
let result = `${a+b}`;
console.log(result);

有了运算符的支持，在实际开发中，可以在后台写一个页面，直接输出给用户展示

字符串的查找

ES6中新增了字符串的查找，而且还支持中文的查找，这点还是非常的棒，下面我们看一个例子

let str = '欢迎学习ES6的字符串查找功能';
console.log(str.includes('查找')); //true

查找结果会直接返回true或者false，这样更加方便，直观；

判断开头是否存在

console.log(b.startsWith('查找'));  //开头

判断结尾是否存在

console.log(b.endsWith('查找'));  //开头

有一点需要注意一下，starts和ends后面都要加s，千万不要漏掉了

复制字符串

有时候我们需要字符串重复，比如分隔符或者特殊符号，这时候就可以派上用场了

document.write('js|'.repeat(5));