ES6------第五天(字符串的扩展后部分)

最新推荐文章于 2024-11-13 17:26:18 发布

weixin_33938733

最新推荐文章于 2024-11-13 17:26:18 发布

阅读量73

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/yj1993/blog/1584967

版权

2019独角兽企业重金招聘Python工程师标准>>>

http://es6.ruanyifeng.com/#docs/string

字符串的扩展

11.实例：模板编译

(1)使用<%...%>放置js代码

(2)使用<%=...%>输出js代码

(3)通过模板字符串，生成正式模板的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <!--加载Traceur的库文件-->
    <script type="text/javascript" src="../js/traceur.js"></script>
    <!--将库文件用于浏览器-->
    <script type="text/javascript" src="../js/browerSystem.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>


    <!--type="module":Traceur 编译器识别 ES6 代码的标志，
    编译器会自动将所有type=module的代码编译为 ES5，然后再交给浏览器执行-->
    <script type="module">


        // 编译字符串模板
        function compile(template){
            // (1)转换成js表达式字符串

            // 方一：用echo()
           /* echo('<ul>');
            for(let i=0;i<data.supplies.length; i++){
                echo('<li>');
                echo(data.supplies[i]);
                echo('</li>')
            };
            echo('</ul>');*/
            // 方二：用正则(不会~~~~~~~~~~~~~~~~~~)
            let evalExpr = /<%=(.+?)%>/g;
            let expr = /<%([\s\S]+?)%>/g;
            template = template.replace(evalExpr, '`); \n echo($1); \n echo(`')
                .replace(expr, '`); \n $1 \n echo(`');
            template = 'echo(`' + template + '`);';

            // (2)将template封装在一个函数里面返回
            let script =
                `
        (function parse(data){
            let output = "";

            function echo(html){
                output += html;
            }

            ${ template }

            return output;
        })`;

            return script;
        }

        // 调用
        let template = `
<ul>
    <% for(let i=0; i<data.supplies.length; i++){ %>
        <li><%= data.supplies[i] %></li>
    <% } %>
</ul>
`;
        let tem = compile(template);
        console.log(tem)

        // 输出
        /**
         *
         *
         (function parse(data){
            let output = "";

            function echo(html){
                output += html;
            }

            echo(`
<ul>
    `);
  for(let i=0; i<data.supplies.length; i++){
 echo(`
        <li>`);
 echo( data.supplies[i] );
 echo(`</li>
    `);
  }
 echo(`
</ul>
`);

            return output;
        })
         *
         */



    </script>

</head>
<body>

</body>
</html>

12.标签模板

(1)定义：模板字符串紧跟在一个函数后面，该函数将被调用来处理这个模板字符串

(2)是函数调用的一种特殊方式，标签就是函数，紧跟在后面的模板字符串就是参数

(3)如果模板字符串里面有变量，先将模板字符串处理成多个参数，再调用函数

(4)函数tag会接收多个参数

function tag(stringArr, value1, value2){
    // stringArr:该数组的成员是模板字符串中那些没有变量替换的部分
    // value1,...:模板字符串各个变量被替换后的值
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <!--加载Traceur的库文件-->
    <script type="text/javascript" src="../js/traceur.js"></script>
    <!--将库文件用于浏览器-->
    <script type="text/javascript" src="../js/browerSystem.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>


    <!--type="module":Traceur 编译器识别 ES6 代码的标志，
    编译器会自动将所有type=module的代码编译为 ES5，然后再交给浏览器执行-->
    <script type="module">

        let a = 5;
        let b = 10;
        function tag(s, v1, v2){
            console.log(s[0]);  // Hello
            console.log(s[1]);  //  world
            console.log(s[2]);  //
            console.log(v1);    // 15
            console.log(v2);    // 50

            return 'OK'
        }
        tag`Hello ${ a + b } world ${ a * b }`; // tag(['Hello', 'world', ''], 15, 50)

    </script>

</head>
<body>

</body>
</html>

(4)一个重要应用：过滤HTML字符串，防止用户输入恶意内容

(5)另一个应用：多语言转换(国际化处理)

13.String.raw()

(1)用来充当模板字符串的处理函数，返回一个斜杠都被转义(斜杠前面再加一个斜杠)的字符串，对应于替换变量后的模板字符串

(2)如果原字符串的斜杠已经转义，就不做任何处理

(3)用途1：作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用

(4)用途2：作为正常的函数调用String.raw('具有raw属性的对象，且raw属性的值应该是一个数组', '')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <!--加载Traceur的库文件-->
    <script type="text/javascript" src="../js/traceur.js"></script>
    <!--将库文件用于浏览器-->
    <script type="text/javascript" src="../js/browerSystem.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>


    <!--type="module":Traceur 编译器识别 ES6 代码的标志，
    编译器会自动将所有type=module的代码编译为 ES5，然后再交给浏览器执行-->
    <script type="module">

        console.log(String.raw`Hello\n${1+6}!`);    // Hello\n7!
        console.log(String.raw`Hello\\n`);          // Hello\\n
        console.log(String.raw({raw: 'test'}, 0, 1, 2));     // String.raw({raw: ['t', 'e', 's', 't']}, 1, 2, 3)
        // t0e1s2t
    </script>

</head>
<body>

</body>
</html>