字符串的扩展

SuperMan-zhang

于 2020-03-25 15:27:16 发布

阅读量251

点赞数

分类专栏： ES6

本文链接：https://blog.csdn.net/fly_zxy/article/details/105096263

版权

ES6 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了ES6对字符串的扩展，包括提供了新的遍历接口，允许使用变量的字符串操作，以及详细讲解了模板字符串的用法，如保留空白、嵌入变量及执行JavaScript代码的能力。

摘要由CSDN通过智能技术生成

字符串的扩展

字符串的遍历接口

es6为字符串添加了变量接口，可以使用for...of变量字符串

    function forString(){
        let string="jack";
        for(let s of string){
            console.log(s);
        }
    }
    forString();

字符串模板

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

模板字符串中所有的缩进、换行回车、空格都会保留

console.log(`string text line 1
string text line 2`);

字符串模板使用反引号标识，如果字符串中包含反引号需要转移

let greeting = `\`Yo\` World!`;

使用${变量名称}方式执行JavaScript代码

//使用${}嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

//使用${}计算表达式
let x=1,y=2;
let stringTemplate=`表达式：${x}+${y}=${x+y}`;
console.log(stringTemplate);    //->表达式：1+2=3

//使用${}执行函数
let x=1,y=2;
function add([x=0,y=0]=[]){
    return x+y;
}
let stringTemplate=`表达式：${x}+${y}=${add([x,y])}`;
console.log(stringTemplate);

模板字符串中也可以通过${}嵌套模板字符串
下面代码中${}执行的javascr代码就返回一个模板字符串

//数据源
const users = [
    {userName:"Tom",age:10},
    {userName:"Jerry",age:12}
]

//模板函数，将数据源以table格式输出
const template=users=>{
    return `
        <table>
            ${users.map(
                item=>{
                   return `<tr><td>${item.userName}</td><td>${item.age}</td></tr>`
                }
            ).join('')}
        </table>
    `;
}

template(users);