视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
ES6字符串的扩展的高频用法总结
2020-11-27 20:19:22 责编:小采
文档

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": "128", "SPDJ": "4", "YDBID": "120", "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方法消除它。

    下载本文
    显示全文
    专题