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;
    }
posted on 2017-08-28 15:12  大高小郑  阅读(160)  评论(0编辑  收藏  举报