ES6字符串的扩展的高频用法总结

来源：动视网责编：小采时间：2020-11-27 20:19:22

ES6字符串的扩展的高频用法总结

ES6字符串的扩展的高频用法总结:ES6为字符串添加了遍历器接口，使得字符串可以被for...of循环遍历。for (let codePoint of 'foo') { console.log(codePoint)} // "f"// "o"// "o" 1.1. 示例：遍历一个JSON数

推荐度：

点击下载本文 文档为doc格式

导读ES6字符串的扩展的高频用法总结:ES6为字符串添加了遍历器接口，使得字符串可以被for...of循环遍历。for (let codePoint of 'foo') { console.log(codePoint)} // "f"// "o"// "o" 1.1. 示例：遍历一个JSON数

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

for (let codePoint of 'foo') {

 console.log(codePoint)}

// "f"// "o"// "o"

1.1. 示例：遍历一个JSON数据

 function lettest()

 {

 var jsongs = {

 "result": [

 { "YDFLAG": "1", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "萝卜丝包", "YDRQ": "[2,1]", "PIC_ID": "12918", "SPDJ": "5", "YDBID": "12919", "NUM": "1", "SPJBXX_ID": "12913" },

 { "YDFLAG": "2", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "肉包", "YDRQ": "[5]", "PIC_ID": "12911", "SPDJ": "5", "YDBID": "12912", "NUM": "2", "SPJBXX_ID": "12907" },

 { "YDFLAG": "3", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "馒头", "YDRQ": "[4]", "PIC_ID": "12905", "SPDJ": "3", "YDBID": "12906", "NUM": "3", "SPJBXX_ID": "12900" },

 { "YDFLAG": "4", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "菜包", "YDRQ": "[2,3]", "PIC_ID": "12889", "SPDJ": "4", "YDBID": "12890", "NUM": "4", "SPJBXX_ID": "12884" }

 ], "signToken": "/v1VqtzUE01JnOFJlHwnXu/IMKsjHL820hMdDHobFJPaE4R8D/VY3Q==", "allNum": "4"

 };

 for (var i of jsongs.result) {

 console.log(i.SPMC);

 }

 //商品名称：萝卜丝包,YDFLAG:1

// 商品名称：肉包,YDFLAG:2

// 商品名称：馒头,YDFLAG:3

// 商品名称：菜包,YDFLAG:4

}

上面示例，是我们经常用到的，之前我们都是使用for i++这样的循环来获取数据，而现在，我们直接可以使用for of 来减少工作量，提高工作效率

1.2. includes(), startsWith(), endsWith()

传统上，JavaScript只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

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

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

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

var s = 'Hello world!';

s.startsWith('Hello') // true

s.endsWith('!') // true

s.includes('o') // true

这三个方法都支持第二个参数，表示开始搜索的位置。

var s = 'Hello world!';

s.startsWith('world', 6) // true

s.endsWith('Hello', 5) // true

s.includes('Hello', 6) // false

上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

1.3. padStart()，padEnd()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

'x'.padStart(5, 'ab') 

// 'ababx'

'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'

'x'.padEnd(4, 'ab') // 'xaba'

padStart的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。

'1'.padStart(10, '0') 

// "0000000001"

'12'.padStart(10, '0') // "0000000012"

'123456'.padStart(10, '0') // "0000123456"

另一个用途

是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"

'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

1.4. 模板字符串

传统的JavaScript语言，输出模板通常是这样写的。

$('#result').append(

 'There are <b>' + basket.count + '</b> ' +

 'items in your basket, ' +

 '<em>' + basket.onSale +

 '</em> are on sale!');

上面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题。

function resulttemplate()

 {

 var basket = { "supplies": [{ "name": "张三" }, { "name": "李四" }, { "name": "lili" }] }

 var mess = `<table>`;

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

 {

 mess += `<tr><td> 姓名</td>

 <td> ${basket.supplies[i].name}</td></tr>`;

 }

 mess += `</table>`;

 $('#result').append(mess);

var ddd=`<table>`;

for(let j of basket.supplies)

{

 ddd+=`<tr><td>${j.name}</td></tr>`;

}

ddd+=`</table>`;

console.log(ddd);

 }

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

所有模板字符串的空格和换行，都是被保留的。如果你不想要这个换行，可以使用trim方法消除它。