ES6学习笔记（字符串扩展）

1.模板字符串

模板字符串的优点在于对长串的字符串进行处理时，不需要使用多个引号去进行处理，只需要在最外层使用间隔号`，中间所有的变量使用${}则可进行替换
先举一个简单的例子：

const xiaoming = {
    name: '小明',
    age: 14,

    //传统的拼接字符串用法
    say1: function () {
        console.log('我叫' + this.name + '，我今年' + this.age +'岁！');   
    },

    //模板字符串用法
    say2:function () {
        console.log(`我叫 ${this.name}，我今年${this.age}岁！`);
    }
}

这样对比，优势还不是很明显，我们再举一个复杂点的例子：
比如，我要处理这样一串字符串：

const getList = function() {

    return {
        status: true,
        msg: '获取成功',
        data: [{
            id: 1,
            title: 'Vue 入门',
            date: '入门'
        }, {
            id: 2,
            title: 'ES6 入门',
            date: '进阶'
        }, {
            id: 3,
            title: 'React入门',
            date: '6P6P'
        }]
    }
};

我要遍历它，并以列表的形式在页面上进行打印，如果使用传统的写法，可能得写成这样:

const {data:listData,status,msg} = getList();
if (status){
    let arr = [];
    listData.forEach(function ({date,title}) {
        arr.push(
            '
\
                ' + title + '' +
                '' + date + '' +
            '
'
        );
    });

    let ul = document.createElement('ul');
    ul.innerHTML = arr.join('');

    document.body.appendChild(ul);

} else {
    alert(msg);
}

在如下部分，需要使用多个引号、加号以及转义字符，在手动编辑的时候，很容易出错

'
\
      ' + title + '' +
       '' + date + '' +
''

如果换成模板字符串，只需要最外层使用间隔符号，里面对应的变量可以直接引用

`
<li>
     <span>${`课程名： ${title}`}span>
     <span>${date}span>
li>
 `

2. 字符串的部分新方法

padStart和padEnd

作用是在原有字符串之前或之后，使用新字符串进行填补

{
    let str = 'i';
    let str1 = str.padStart(5,'test');
    let str2 = str.padEnd(5,'test');
    console.log(str1);   //打印结果 teseti
    console.log(str1);   //打印结果 itest
}

repeat

{
    console.log('i'.repeat(10));   //打印结果 iiiiiiiiii
}

startsWith和endsWith

判断字符串是否以某串字符为开头或结尾

{
    const str = 'abcd efg';

    console.log(str.startsWith("a"));    //结果为true
    console.log(str.startsWith("ab"));    //结果为true
    console.log(str.endsWith("g"));    //结果为true
    console.log(str.endsWith("fg"));    //结果为true

    console.log(str.startsWith("b"));    //结果为false
    console.log(str.endsWith("f"));    //结果为false
}

3. for-of的使用

ES6之前，遍历字符串一般有以下的形式：

使用for循环

let str = 'STRING';
for (var i = 0 ; i < str.length ; i++){
    console.log(str[i]);
    console.log(str.charAt(i));
}

转成数组后遍历

let str = 'STRING';
// var oStr = Array.prototype.slice.call(str);
// var oStr = str.split('');
// const oStr = [...str];
const [...oStr] = str;  //以上4种方式都可以将字符串转为数组

oStr.forEach(function (word) {
    console.log(word);
})

在ES6中可以直接使用for of，具体写法如下：

let str = 'STRING';
for (let word of str){
    console.log(word);
}