ES6--字符串的扩展

一、字符串遍历–for…of

• ES6 为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历。

       let str = 'abcdef';
       for(let char of str)
       {
           console.log(char);//a b c d e f
       }
       for(let key in str)
       {
           console.log(str.charAt(key));//a b c d e f
       }

二、模板字符串–${}

• 模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

1. 基本用法

（1）普通字符串

    let string = `Hello'\n'world`;
    console.log(string); 
    // "Hello'
    // 'world"

（2）多行字符串

    let str=`Hey,
            Are you OK?`;
    console.log(str);
    //Hey,
    //Are you OK?

（3）字符串插入变量和表达式。

• 变量名写在 $ {} 中，${} 中可以放入 JavaScript 表达式

       let s = '我的';
       let str = `abc${s}def`;
       console.log(str);//abc我的def

• 字符串中调用函数

    function f(){
        return "zjm";
    }
    let str= `My name is ${f()}`;
    console.log(str);//My name is zjm

• 注：模板字符串中的换行和空格都是会被保留的

    var str=`
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
        `;
    console.log(str);

2. 标签模板

• 标签模板，是一个函数的调用，其中调用的参数是模板字符串。

    alert`Hello world!`;
    // 等价于
    alert('Hello world!');

• 当模板字符串中带有变量，会将模板字符串参数处理成多个参数

    function f(stringArr,...values){
        let result = "";
        for(let i=0;i<stringArr.length;i++){
            result += stringArr[i];
            if(values[i]){
                result += values[i];
            }
        }
        return result;
    }
    let name = 'Mike';
    let age = 27;
    f`My Name is ${name},I am ${age+1} years old next year.`;//My Name is Mike,I am 28 years old next year.
    // 等价于
    f(['My Name is',',I am ',' years old next year.'],'Mike',28);

3. 应用

• 过滤 HTML 字符串，防止用户输入恶意内容

    function f(stringArr,...values){
        let result = "";
        for(let i=0;i<stringArr.length;i++){
            result += stringArr[i];
            if(values[i]){
                result += String(values[i]).replace(/&/g, "&amp;")
                        .replace(/</g, "&lt;")
                        .replace(/>/g, "&gt;");
            }
        }
        return result;
    }
    let msg="<hello & world!>";
    console.log(f`世界${msg}`);//世界&lt;hello &amp; world!&gt;