本人是android开发的,由于最近React Native的火热,再加上自己完全不懂JS的语法,俗话说的好"落后就要挨打",虽然不知道谁说的,不过很有道理.
学习书籍《ECMAScript 6 入门 》
字符串扩展
模板字符串
传统的JavaScript语言，输出模板通常是这样写的。
$('#result').append(
'There are ' + basket.count +
'items in your basket, ' + basket.onSale +
'are on sale!'
);
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
$('#result').append(`
There are ${basket.count}
items in your basket, ${basket.onSale}
are on sale!
`);
如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。
vargreeting=`\`Yo\` World!`;
模板字符串中嵌入变量，需要将变量名写在${}之中
大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。
var x = 1;
var y = 2;
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"
var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3
模板字符串之中还能调用函数。
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar
如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。
// 写法一
let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "Hello Jack!"
// 写法二
let str = '(name) => `Hello ${name}!`';
let func = eval.call(null, str);
func('Jack') // "Hello Jack!"
它的意思其实就是用模版字符串拼接一串代码,然后让拼接的代码运行
第一种写法主要是用到了JS特殊函数Function
Function()构造函数
函数实际上是功能完整的对象 。Function类可以表示开发者定义的任何函数。用Function类直接创建函数的语法如下：
var function_name = new function(arg1, arg2, ..., argN, function_body)
在上面的形式中，每个 arg 都是一个参数，最后一个参数是函数主体（要执行的代码）。这些参数必须是字符串。
额~我想不用解释什么了,说的很清楚了
第二种写法用的是JS的另外一个函数call
call方法:
语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
也就是说可以执行一个方法,字符串拼接的也行,第一个参数是调用的方法名,如果没有传null,第二个是方法参数;
eval可以把字符串变成可执行;
标签模块
模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。
alert`123`
// 等同于
alert(123)
标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。
处理后的格式相当于这种格式
function tag(stringArr, value1, value2){
// ...
}
// 等同于
function tag(stringArr, ...values){
// ...
}
函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。
也就是说他的第一个参数肯定是数组
下面来个案例分析
var total = 30;
var msg = passthru `The total is ${total} (${total*1.05} with tax)`;
function passthru(literals) {
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)"
通过断点分析:
var msg = passthru `The total is ${total} (${total*1.05} with tax)`;
这个标签模版转换成方法即:
passthru ( ['The total is ' , '(' , 'with tax'] , tatal , tatal*1.05);
而上面代码中则只有一个参数,而且是数组
我认为应该是默认还是三个方法,只不过如果你的方法里只写一个,则它默认把第一个参数是标签模版的第一个参数,即为
['The total is ' , '(' , 'with tax']
这个数组.
再这里我设想,如果passthru方法里面,你写两个参数呢?
我觉得应该是这样的参数:
第一个参数: 模版字符串数组;
第二个参数: 模版中的第一个变量;
好了,不多说 咱们试一试 我的设想成立不成立
断点结果
由断点可以看出来 我的设想是成立的,也就是,该方法的参数数量,是和模版中的变量挂钩的,而自己如果少写了一些参数,也没事 ,因为他真实的参数数量是通过标签模版就已经定死了.
而要火的其他参数,则可以使用 arguments 这个数组,从名称就可以看出来这个是真正的参数数组,也就是说标签模版中的字符数组以及参数都可以在这个数组中找到
说这么多,不如上图,咱们看图说话
参数数组
“标签模板”的一个重要应用，就是过滤HTML字符串，防止用户输入恶意内容。
过滤HTML字符串
上面代码中，sender变量往往是用户提供的，经过SaferHTML函数处理，里面的特殊字符都会被转义。
上图的sender中包含有一个 alert弹框 恶意代码,需要过滤掉
通过使用正则表达式,找出参数中带有"&"、"<"、">"符号,并把他们转换成"&"、"<"、">".
所以通过过滤,最好得到的字符串为
过滤后的字符串
ES6还为原生的String对象，提供了一个raw方法。
String.raw方法，往往用来充当模板字符串的处理函数,返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。
String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"
String.raw`Hi\u000A!`;
// 'Hi\\u000A!'
string.raw方法也可以作为正常的函数使用。这时，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组。
String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'
// 等同于
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);
模板字符串的限制
前面提到标签模板里面，可以内嵌其他语言。但是，模板字符串默认会将字符串转义，因此导致了无法嵌入其他语言。
网友评论