字符串遍历

  var str = 'hello';

for(let s of str){console.log(s += ' ')}

  //h e l l o

字符串查找:添加了include(str,index):返回布尔值,表示是否找到了参数字符串,index表示查找开始位置,默认0

      startsWith(str,index):返回布尔值,表示在字符串头部是否找到参数字符串,index同上

      endsWith(str,index):返回布尔值,表示在字符串尾部是否找到参数字符串,index同上

重复字符串:‘x’.repeat(3) //xxx   重复字符串,参数表示重复次数,如果是小数则取整,不会四舍五入;如果是负值或者Infinity则报错

字符串补全:padStart(length,str) :在字符串开始位置补全字符串,length表示长度。str表示补全的内容

      padEnd(length,str):在字符串尾部补全字符串,length表示长度。str表示补全的内容

      如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串;如果str省略则用空格代替。

模板字符串:

  传统的模板字符串:var str = '<div>...</div>'+ value+'<div></div>';的方式拼接字符串

  ES6引入模板字符串(反引号)的方式 var str =  `<div>...</div><ul><li>1111</li><li>${value}</li></ul>`;

  如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。如果你不想要这个换行,可以使用trim方法消除它。

  var str =  `<div>...</div><ul><li>1111</li><li>${value}</li></ul>`.trim();

  模板字符串中嵌入变量,需要将变量名写在${}之中。大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。

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

    function fn(){return 'world'}

  `hello ${ fn() }`   //hello world

  模板字符串甚至还能嵌套。

const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
const data = [
{ first: '<Jane>', last: 'Bond' },
{ first: 'Lars', last: '<Croft>' },
]; console.log(tmpl(data));
// <table>
//
// <tr><td><Jane></td></tr>
// <tr><td>Bond</td></tr>
//
// <tr><td>Lars</td></tr>
// <tr><td><Croft></td></tr>
//
// </table>

如果需要引用模板字符串本身,在需要时执行,可以像下面这样写。

// 写法一
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!"

模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。

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会接受到value1value2两个参数。

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"

下面是一个更复杂的例子。

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)"

上面这个例子展示了,如何将各个参数按照原来的位置拼合回去。

passthru函数采用rest参数的写法如下。

function passthru(literals, ...values) {
var output = "";
for (var index = 0; index < values.length; index++) {
output += literals[index] + values[index];
} output += literals[index]
return output;
}

“标签模板”的一个重要应用,就是过滤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;
}

上面代码中,sender变量往往是用户提供的,经过SaferHTML函数处理,里面的特殊字符都会被转义。

var sender = '<script>alert("abc")</script>'; // 恶意代码
var message = SaferHTML`<p>${sender} has sent you a message.</p>`; message
// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

标签模板的另一个应用,就是多语言转换(国际化处理)。

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

ES6学习笔记二的更多相关文章

  1. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  2. ES6学习笔记(二)——字符串扩展

    相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习 ...

  3. ES6学习笔记二:各种扩展

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7242967.html 一:字符串扩展 1:字符串遍历器 for (let char of str) { // ...

  4. ES6学习笔记(二)

    Set 和 Map 数据结构 1.set 基本用法 ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值 Set本身是一个构造函数,用来生成Set数据结构 const s ...

  5. es6学习笔记二:生成器 Generators

    今天这篇文章让我感到非常的兴奋,接下来我们将一起领略ES6中最具魔力的特性. 为什么说是“最具魔力的”?对于初学者来说,此特性与JS之前已有的特性截然不同,可能会觉得有点晦涩难懂.但是,从某种意义上来 ...

  6. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  7. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  8. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  9. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

随机推荐

  1. 使用JavaMail发送邮件

    一.邮件的相关概念 邮件协议.主要包括: SMTP协议:Simple Mail Transfer Protocol,即简单邮件传输协议,用于发送电子邮件 POP3协议:Post Office Prot ...

  2. 使用iTerm2快捷连接SSH

    iTerm2和Mac自带的Terminal差不多,但是功能更强大,无论透明度.字体.配色.分屏等都可以设置,除了这些花哨的功能外,最近新学了一招,就是可以通过Profiles的设置打开就执行写好的脚本 ...

  3. 信息中心网络 ,Information-centric networking, ICN

  4. TextView字体阴影效果

    android:shadowDx="1" android:shadowDy="1" android:shadowColor="#8c8c8c" ...

  5. OpenCV安装与配置

    本文使用OpenCV2.48在win10平台下操作. 一,关于OpenCV OpenCV是开源C++计算机可视化处理库,它集成了很多计算机图形图像处理的功能.还有机器学习,字符识别,人脸识别,物体检测 ...

  6. 提高前端开发效率必备AngularJS (基础)

    简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...

  7. Newtonsoft.Json 序列化和反序列化 时间格式【转】

    1.JSON序列化 string JsonStr= JsonConvert.SerializeObject(Entity); eg:   A a=new A(); a.Name="Elain ...

  8. ajax的简单介绍

    响应主体,就是服务器给我们返回的结果内容(浏览器里的responsive) 请求主体,是我们给服务器的数据 输入域名发起一次请求,得到的可能是标签,标签可能还要在发一次请求 post怎么发请求:for ...

  9. BZOJ 2815: [ZJOI2012]灾难

    呃,题面没了,大概就是给出一些生物之间的捕食关系,求灭绝树每个点的灾难值. 拓扑排序之后倒着加入点,动态维护fa[][]数组,倍增法求LCA,当然大佬愿意写动态树也是极好的…… #include &l ...

  10. LinuxMint配置Git(图文教程)

    1.生成秘钥(直接回车,秘钥存放路径看命令行信息) 2.打开秘钥,需要注意的是.ssh可能是隐藏的,这时需要Ctrl+H显示隐藏文件夹 3.复制秘钥,添加到GitHub(Settings), 4.添加 ...