ES6学习笔记2-字符串扩展

1、新增的字符串方法

• 1.includes()：判断字符串中是否包含某字符，返回布尔值
• 2.startsWith()：判断字符串是否是以某字符为开始字符
• 3.endsWith()：判断字符串中是否是以某字符为结束字符

以上三种方法都可以有第二个参数，为起始查找的下标，endWith方向相反。

• 4.repeat(n)：将字符串重复n次，返回一个新的字符串；若为0或者undefined，则返回一个空字符串。
• 5.padStart(len, padStr)：头部补齐，将要填充的字符串padStr在原字符串的头部补齐到长度为len的字符串；如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。
• 6.padEnd(len, padStr)：尾部补齐，将要填充的字符串padStr在原字符串的尾部补齐到长度为len的字符串；如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。

2、模板字符串

模板字符串的简单使用

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);
//默认会保留换行和空格，trim()方法可以去掉换行和空格。
$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

标签模板

它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。

    var total = 30;
    var msg = passthru`The total is ${total} (${total*1.05} with tax)`;    //用passthru函数调用模板字符串

    /*
        passthru函数的参数：
            第一个参数：literals，由除了模板字符串中的变量外，其他字符组成的数组，每个"数组元素"是根据"模板字符串中的变量"进行切割的。
            第一个参数还有一个raw属性，该属性的值是一个数组，存储的是转义前的字符串。
            value1,
            value2,
            ...
            其他参数value就是模板字符串中的嵌套变量
    */
    function passthru(literals) {

      console.log(literals);
      //["The total is ", " (", " with tax)", raw: Array(3)]

      var result = '';
      var i = 0;

      while (i < literals.length) {
        result += literals[i++];
        if (i < arguments.length) {
          result += arguments[i];
        }
      }

      return result;
    }

    msg // "The total is 30 (31.5 with tax)"

3.标签模板的应用（过滤HTML字符串，防止用户输入恶意内容）

    var message =
    SaferHTML`<p>${sender} has sent you a message.</p>`;

    function SaferHTML(templateData) {
        var s = templateData[0];
        for (var i = 1; i < arguments.length; i++) {
            var arg = String(arguments[i]);

            // Escape special characters in the substitution.
            s += arg.replace(/&/g, "&amp;")
                          .replace(/</g, "&lt;")
                          .replace(/>/g, "&gt;");

             // Don't escape special characters in the template.
            s += templateData[i];
        }
        return s;
    }