es6学习笔记-字符串模板_v1.0_byKL

xiongzenghui 发布于2019-08-21 11:39 / 760人阅读

摘要：学习笔记字符串模板实例模板编译先组成一个模板使用放置代码使用输出表达式。这被称为标签模板功能。该数组的成员与数组完全一致参考引用字符串扩展

es6学习笔记-字符串模板_v1.0 实例：模板编译

//先组成一个模板
var template = `

  <% for(var i=0; i < data.supplies.length; i++) { %> //使用<%...%>放置JavaScript代码
    <%= data.supplies[i] %> //使用<%= ... %>输出JavaScript表达式。
  <% } %>

`;

//这是编译模板的函数,将模板编译写js可运行的脚本
function compile(template){
    //正则规则,匹配<%=和%>之间的字符串,这个字符串里面包括零个或任意个字符(.+?),并且捕获,全局匹配
    var evalExpr = /<%=(.+?)%>/g; 
    //正则规则,匹配<%和%>之间的字符串,这个字符串里面包括1个或多个空白符或非空白符或者什么都没有,并且捕获,全局匹配
    var expr = /<%([sS]+?)%>/g; 

    template = template
        //先处理js表达式,将<%=和%>之间的字符串进行替换
        .replace(evalExpr, "`); 
  echo( $1 ); 
  echo(`")
        //然后再处理js代码,将<%和%>之间的字符串进行替换
        .replace(expr, "`); 
 $1 
  echo(`");

    //然后再用括号包起来,注意里面有反引号
    template = "echo(`" + template + "`);"; //注意这里已经是被标上了echo方法了,跟下面echo函数对应

    var script = //这里直接用反引号包起来
        `(function parse(data){
    var output = "";

    function echo(html){ //声明了echo函数
      output += html;
    }

    ${ template } //直接解析并且执行里面的函数,并且调用到上面设置的echo函数进行处理

    return output;
  })`;

    return script;
}

----------------------------------------------
//这是编译函数处理后返回的script,变成了可执行的js代码
echo("");
for(var i=0; i < data.supplies.length; i++) {
  echo("");
  echo(data.supplies[i]);
  echo("");
};
echo("");

//在使用的时候,先生成js代码
var parse = eval(compile(template));
//然后执行这个js代码,其实就是将参数传给编译后的js代码进行运行
console.log(parse({ supplies: [ "broom", "mop", "cleaner" ] }));

标签模板

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

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

alert`123` //alert是函数(也就是所谓的标签),`123`是模板字符串
// 等同于
alert(123)

"标签"的第一个参数是个数组，数组的内容是模板字符串中除了大括号表达式以外的内容。从第二个参数起就是大括号表达式计算的结果

//tag是一个自定义函数
let tag = function(stringArr, value1, value2){
    console.log(stringArr); //[ "Hello ", " world ", "" ],是一个数组
    console.log(value1);//15,是大括号运算后的结果,即模板字符串解析后的结果,a+b =15
    console.log(value2);//50,类似
}

let a = 5;
let b = 10;
//这个tag是一个函数
tag`Hello ${ a + b } world ${ a * b }`;

//根据tag函数分析的参数,其实相当于以前的这种传参
tag(["Hello ", " world ", ""], 15, 50)

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

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

再看另外一个例子熟悉一下:

真正的参数还是会用arguments

需要了解第一个参数是数组的使用方式

let passthru = function(literals) {//这里是一个数组
    let result = "";
    let i = 0;

    while (i < literals.length) { //通过遍历这个数组
        result += literals[i++];//这是保存非模板字符串的(大括号的)
        //console.log(result); // 如果分别打印result就会发现他的过程
        if (i < arguments.length) {//获取模板字符串解析之后的真正参数
            result += arguments[i]; //这是模板字符串解析之后的(大括号内的内容,即${total}之类的)
            //console.log(result); // 如果分别打印result就会发现他的过程
        }
    }

    return result;
}

let total = 30;
let msg = passthru`The total is ${total} (${total*1.05} with tax)`;
console.log(msg) // "The total is 30 (31.5 with tax)"

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

let SaferHTML = function (templateData) {
    let s = templateData[0];//先将大括号外的第一个元素保存起来(即真正的参数之前的数据)
    for (let i = 1; i < arguments.length; i++) { //对于大括号内的进行遍历处理
        let arg = String(arguments[i]);

        // Escape special characters in the substitution.
        s += arg.replace(/&/g, "&") //将处理完的模板字符串放回去返回结果里面
            .replace(//g, ">");
    }
    //原例子的写法不太清晰,我改一下
    //在将大括号外的第二个元素保存到返回结果(即真正参数之后的数据)
    s += templateData[1];//
    return s;
}

let sender = ""; // 恶意代码
let message = SaferHTML`${sender} has sent you a message.`;

console.log(message)
//返回 has sent you a message.

多语言转换（国际化处理）。

i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "欢迎访问xxx，您是第xxxx位访问者！"

没有详细函数写法,只是说明一个用途

String.raw()

tag函数的第一个参数strings，有一个raw属性，也指向一个数组。该数组的成员与strings数组完全一致

tag`First line
Second line`

function tag(strings) {
  console.log(strings.raw[0]);
  // "First line
Second line"
}

参考引用:

es6字符串扩展

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86968.html

es6学习笔记-字符串的扩展_v1.0_byKL

摘要：学习笔记字符串的扩展字符的表示法允许使用的形式表示一个字符，但在之前，单个码点仅支持到，超出该范围的必须用双字节形式表示，否则会解析错误。返回布尔值，表示参数字符串是否在源字符串的头部。，是引入了字符串补全长度的功能。 es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符，但在 ES6 之前，单个码点仅支持u00...

JaysonWang 2019-08-21 11:36 评论0 收藏0
es6学习笔记-箭头函数_v1.0_byKL

摘要：因为箭头函数本身没有所以不可以当作构造函数，也就是说，不可以使用命令，否则会抛出一个错误。箭头函数不可以使用对象，该对象在函数体内不存在。 es6学习笔记-箭头函数_v1.0 箭头函数使用方法 var f = v => v; //普通函数配合箭头函数写法,这里并且是传参的 //相当于 var f = function(v) { return v; }; /*-----------...

lushan 2019-08-20 14:47 评论0 收藏0
es6学习笔记-数值的扩展_V1.0_byKL

摘要：学习笔记数值的扩展有一些不常用或者还不支持的就没有记录了总体来说本篇只是一个备忘而已用来检查一个数值是否为有限的。两个新方法只对数值有效，非数值一律返回。参考引用数值扩展 es6学习笔记-数值的扩展有一些不常用或者还不支持的就没有记录了,总体来说本篇只是一个备忘而已 Number.isFinite(), Number.isNaN() Number.isFinite()用来检查一个数值...

宋华 2019-08-20 15:06 评论0 收藏0
es6学习笔记-顶层对象_v1.0_byKL

摘要：学习笔记顶层对象虽然是笔记但是基本是抄了一次大师的文章了顶层对象顶层对象，在浏览器环境指的是对象，在指的是对象。之中，顶层对象的属性与全局变量是等价的。的写法模块的写法上面代码将顶层对象放入变量。参考引用顶层对象实战 es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象顶层对象，在浏览器环境指的是window对象，在Node指的是gl...

Meils 2019-08-21 11:31 评论0 收藏0
es6学习笔记-let,const和块级作用域_v1.0_byKL

摘要：考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。函数声明语句函数表达式循环循环还有一个特别之处，就是循环语句部分是一个父作用域，而循环体内部是一个单独的子作用域。声明一个只读的常量。 es6学习笔记-let,const和块级作用域_v1.0 块级作用域 javascript 原来是没有块级作用域的,只有全局作用域和函数作用域例子1 因为没有块级作用域,所以每次的i都是一...

Youngdze 2019-08-20 14:49 评论0 收藏0