ES6-字符串扩展

(1)
for···of循环。ps:可以使用break,找到合适的值后不再执行后面的循环,若想获得下标,可使用for(let v of arr.keys())

for (let i of 'foo') {
  console.log(i) 
}
//f
//o
//o

for...of循环不会循环对象的key,只会循环出数组的value,因此for...of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for...in
如果实在想用for...of来遍历普通对象的属性的话,可以通过和Object.keys()搭配使用,先获取对象的所有key的数组然后遍历:

var student={
    name:'zhangsan',
    age:20,
    address:{
        country:'china',
        city:'shenzhen',
    }
}
for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);
}

(2)
includes() 返回布尔值,表示是否找到了参数字符串。
startsWith() 返回布尔值,表示参数字符串是否在源字符串的头部。
endsWith() 返回布尔值,表示参数字符串是否在源字符串的尾部。

var str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
str.includes('o') // true

这三个方法都支持第二个参数,表示搜索的位置。endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

str.endsWith('Hello', 5) // true
str.includes('Hello', 6) // false

(3)
repeat() 返回一个新字符串,表示将原字符串重复n次。参数如果是小数,会被取整(取小)。

str.repeat(n)

(4)
padStart() 用于头部补全
padEnd() 用于尾部补全

'abc'.padEnd(5,'x') //abcxx

var year = new Date().getFullYear();
var month = (new Date().getMonth() + 1)>9?(new Date().getMonth() + 1) : '0'+(new Date().getMonth() + 1);
var day = new Date().getDay()>9?new Date().getDay() : '0'+new Date().getDay();
console.log('2'.padStart(10,year+'-'+month+'-'+day));          //2017-06-02
console.log('2-24'.padStart(10,year+'-'+month+'-'+day));       //2017-02-24
console.log('09-16'.padStart(10,year+'-'+month+'-'+day));      //2017-09-16
console.log('17-09-16'.padStart(10,year+'-'+month+'-'+day));   //2017-09-16

(5)模板字符串

var name = "乐美";
document.getElementById('wrap1').innerHTML = `<div>${name},知道吗,这样就不用
<span style="color:red;">引号和加号</span>了
</div>`;

document.getElementById('wrap2').innerHTML = (`
<ul>
<li>li1</li>
<li>li2</li>
</ul>`.trim());//.trim()去掉换行

function fn(){
    return 'hellow'
}
console.log(`${fn()} world`)

(6) 模板编译(实例)

function compile(template){
  var evalExpr = /<%=(.+?)%>/g;
  var expr = /<%([\s\S]+?)%>/g;
// .(点)查找单个字符,除了换行和行结束符。
// \s(小写s)是指空白,包括空格、换行、tab缩进等所有的空白,而\S(大写S)刚好相反。[\s\S]这样一正一反,表示所有的字符,完全的,一字不漏的。
// ?(问号)表示懒惰模式,只找到一个就停下来。其实上面的正则evalExpr 只要带上‘?’,就可以直接换成用[\s\S]匹配,没必要用‘.+’,因为他只要找到第一个‘%>’就会停下来。

  template = template
    .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');//$1 表示正则里面 第一个小括号里面的内容,类似还有$2,$3

  template = 'echo(`' + template + '`);';
  var script =
  `(function parse(data){
    var output = "";
    function echo(html){
      output += html;
    }
    ${ template }
    return output;
  })`;
  return script;
}

var template = (`<ul>
    <% for(var i=0;i<data.supplies.length;i++){ %>
        <li><%= data.supplies[i] %></li>
    <% } %>
</ul>`)
var parse = eval(compile(template));
document.getElementById('wrap3').innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容