网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

ES6学习笔记第四章-创新互联

字符串的扩展

创新互联从2013年创立,公司以成都网站制作、成都做网站、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务,适用行业近百种。服务企业客户超过千家,涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格,为不同客户提供各种风格的特色服务。

 1 字符的Unicode表示法

 js允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的码点。

 "\u0061"

     //a

  ES6做出了一点改进,大括号表示法与四字节的UTF-16编码是等价的,只要将码点放入大括号,就能正确解读。

   2 codePointAt()

    js内部,字符以UTF-16的格式存储,每个字符固定为2字节。对于那些需要4个字节存储的字符,js会认为他们是2个字符。ES6提供了codePointAt()方法,能够正确处理4个字节存储的字符,返回一个字符的码点。

    codePointAt()方法是测试一个字符由2个还是4个字节组成的最简单方法。

    function is32Bit(c){
        return c.codePointAt(0)>0xFFFF;
    }

    3 String.fromCodePoint()

    ES5提供了String.fromCharCode方法,用于从码点返回对应字符,但是这个方法不能识别32位的UTF-16字符。ES6提供了String.fromCodePoint方法,弥补了String.fromCharCode方法的不足。

    该方法作用上正好和codePointAt方法相反。

    4 字符串的遍历器接口

    ES6为字符串添加了遍历器接口,使字符串可以由for...of循环遍历。

    for (let codePoint of 'foo'){

        console.log(codePoint);

    }

    // "f"

    //"o"

    //"o"

    这个遍历器大的优点是可以识别大于0xFFFF的码点,传统for循环无法识别。

    5 at()

    ES6为字符串实例提供了at方法,等同于ES5的charAt方法,并可以识别Unicode编号大于0xFFFF的字符。

    6 normalize()

    7 includes(), startsWith(), endsWith()

     js中只有indexOf方法可以用来确定一个字符串是否包含在另一个字符串中。

     ES6则又提供了3种新方法

     includes() :返回布尔值,表示是否找了到参数字符串

     startsWith() :返回布尔值, 表示参数字符串是否在源字符串的头部。

     endsWith(): 返回布尔值,表示参数字符串是否在源字符串的尾部。

    8 repeat()

     repeat 方法返回一个新的字符串,表示将原字符串重复n次。

     参数是负数或者Infinity,会报错。小数会向下取整。如果是字符串,会先转换成数字。

    9 padStart(), padEnd()

   ES7推出字符串补全长度的功能。如果某个字符串未达到指定长度,会在头部或者尾部补全。

     padStart 和padEnd分别接受两个参数,第一个用来指定字符串的最小长度,第二个则是用来补全的字符串。

     如果原字符串的长度等于或者大于指定的最小长度,则返回原字符串。

     如果省略第二个参数,则会用空格来补全。

  10 模板字符串

      模板字符串是增强版的字符串,用反引号(`)标识。他可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

     $("#result").append(`

          There are ${basket.count} items

         in your basket, ${basket.onSale}

         are on sale!

     `);

        如果在模板字符串中需要使用反引号,则在其前面要用反斜杠转义。

        var greeting = `\`yo\`world!`;

        在模板字符串中使用多行字符,所有空格和缩进都会被保留在输出中。

        大括号内可以放入任意的js表达式,可以进行运算,以及引用对象属性。

        模板字符串中还能调用函数

        如果大括号中的值不是字符串,将按照一般的规则转化成为字符串。

    11.实例:模板编译

    下面,我们来看一个通过模板字符串,生成正式模板的实例。

    var template = `

    

         <% for(var i=0; i < data.supplies.length; i++) { %>

          

  • <%= data.supplies[i] %>
  •      <% } %>

        

    `;

    上面代码在模板字符串之中,放置了一个常规模板。该模板使用<%...%>放置JavaScript代码,使用<%= ... %>输出JavaScript表达式。

    怎么编译这个模板字符串呢?

    一种思路是将其转换为JavaScript表达式字符串。

    echo('

    ');

        for(var i=0; i < data.supplies.length; i++) {

         echo('

  • ');

         echo(data.supplies[i]);

         echo('

  • ');

        };

        echo('

');

    这个转换使用正则表达式就行了。

    var evalExpr = /<%=(.+?)%>/g;

    var expr = /<%([\s\S]+?)%>/g;

    template = template

     .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')

     .replace(expr, '`); \n $1 \n  echo(`');

    template = 'echo(`' + template + '`);';

    然后,将template封装在一个函数里面返回,就可以了。

    var script =

    `(function parse(data){

     var output = "";

     function echo(html){

      output += html;

     }

     ${ template }

     return output;

    })`;

    return script;

    将上面的内容拼装成一个模板编译函数compile。

    function compile(template){

     var evalExpr = /<%=(.+?)%>/g;

     var expr = /<%([\s\S]+?)%>/g;

     template = template

      .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')

      .replace(expr, '`); \n $1 \n  echo(`');

     template = 'echo(`' + template + '`);';

     var script =

     `(function parse(data){

      var output = "";

      function echo(html){

       output += html;

      }

      ${ template }

      return output;

     })`;

     return script;

    }

    compile函数的用法如下。

    var parse = eval(compile(template)); //eval()计算字符串方法。

    div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });

    //  

        //   

  • broom
  •     //   

  • mop
  •     //   

  • cleaner
  •     //  

    12. 标签模板

     模板字符串可以紧跟在一个函数后面,该函数将被调用来处理这个模板字符串。称之为“标签模板”功能。标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。

    但是,如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。

    var a = 5;

    var b = 10;

    tag`Hello ${ a + b } world ${ a * b }`;

    // 等同于

    tag(['Hello ', ' world ', ''], 15, 50);

    上面代码中,模板字符串前面有一个标识名tag,它是一个函数。整个表达式的返回值,就是tag函数处理模板字符串后的返回值。

    函数tag依次会接收到多个参数。

    function tag(stringArr, value1, value2){

     // ...

    }

    // 等同于

    function tag(stringArr, ...values){

     // ...

    }

    tag函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分,也就是说,变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间,以此类推。

    tag函数的其他参数,都是模板字符串各个变量被替换后的值。由于本例中,模板字符串含有两个变量,因此tag会接受到value1和value2两个参数。

    tag函数所有参数的实际值如下。

    第一个参数:['Hello ', ' world ', '']

    第二个参数: 15

    第三个参数:50

    也就是说,tag函数实际上以下面的形式调用。

    tag(['Hello ', ' world ', ''], 15, 50)

    我们可以按照需要编写tag函数的代码。下面是tag函数的一种写法,以及运行结果。

    var a = 5;

    var b = 10;

    function tag(s, v1, v2) {

     console.log(s[0]);

     console.log(s[1]);

     console.log(s[2]);

     console.log(v1);

     console.log(v2);

     return "OK";

    }

    tag`Hello ${ a + b } world ${ a * b}`;

    // "Hello "

    // " world "

    // ""

    // 15

    // 50

    // "OK"

    13 String.raw()

     ES6还为原声的String对象提供了raw方法。

     String.raw方法往往用来充当模板字符串的处理函数,返回一个反斜线都会被转义(既反斜线前加反斜线)的字符串,对应于替换变量后的模板字符串

   如果原字符串的反斜线已经转义,那么String.raw不会做任何处理。

     String.raw方法可以作为处理模板字符串的基本方法,它会将所有变量替换,而且对斜杠进行转义,方便下一步作为字符串来使用。

     String.raw方法也可以作为正常的函数使用。这时,它的第一个参数,应该是一个具有raw属性的对象,且raw属性的值应该是一个数组。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:ES6学习笔记第四章-创新互联
网页路径:http://bjjierui.cn/article/dpcpop.html

其他资讯