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(
            '<li>\
                <span>' + title + '</span>' +
                '<span>' + date + '</span>' +
            '</li>'
        );
    });

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

    document.body.appendChild(ul);

} else {
    alert(msg);
}

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

'<li>\
      <span>' + title + '</span>' +
       '<span>' + date + '</span>' +
'</li>'

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

`
<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);
}

猜你喜欢

转载自blog.csdn.net/lt326030434/article/details/81537738