ES6学习笔记(三)--字符串扩展

原创 2016年06月01日 17:14:24

字符串扩展

for…of循环遍历字符串

let text = 'abc'
for (let i of text) {
  console.log(i);
}
//a
//b
//c

新增确定一个字符串是否包含在另一个字符串中,es5中只有indexOf

  • includes():返回布尔值,表示是否找到了参数字符串
  • startsWith():返回布尔值,表示参数字符串是否在源字符串的头部
  • endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部
var s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

//三个方法都支持第二个参数,表示开始搜索的位置
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true  向前搜索
s.includes('Hello', 6) // false

repeat() 返回一个新字符串,表示将原字符串重复n次

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

padStart(),padEnd() 补全长度

第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串

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

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

//原字符串的长度,等于或大于指定的最小长度,则返回原字符串
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

//补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串
'abc'.padStart(10, '0123456789')// '0123456abc'

//省略第二个参数,则会用空格补全长度
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

模板字符串

传统的JavaScript语言,输出摸板通常是这样的

$("#result").append(
  "There are <b>" + basket.count + "</b> " +
  "items in your basket, " +
  "<em>" + basket.onSale +
  "</em> are on sale!"
);

ES6引入了模板字符串

$("#result").append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

常用写法

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

模板字符串中嵌入变量,需要将变量名写在,{}可以看作javascript的运行环境,因此还可以写方法调用等js代码

ES5中的常用字符串方法

  • toUpperCase()把一个字符串全部变为大写
  • toLowerCase()把一个字符串全部变为小写
  • indexOf()会搜索指定字符串出现的位置
  • substring()返回指定索引区间的子串
var s = 'hello, world'
s.substring(0, 5); // 从索引0开始到5(不包括5),返回'hello'
s.substring(7); // 从索引7开始到结束,返回'world'
  • split()把字符串分割为字符串数组
  • replace()替换与正则表达式匹配的子串
  • search()检索与正则表达式相匹配的值
版权声明:本文为博主原创文章,转载请注明出处。

es6-特性整理

es6-特性 这是一个 ES2015(ES6) 的Cheatsheet,其中包括提示、小技巧、最佳实践和一些代码片段,来帮助小白来学习,我也是从github 上“拿来的”,所以要想学好前端,勤逛gi...

ECMAScript6(0):ES6简明参考手册

本文翻译自github上的一篇文章 原文地址:https://github.com/DrkSephy/es6-cheatsheet es6-参考手册该手册包括ES2015[ES6]的知识点、技巧、建...
  • Faremax
  • Faremax
  • 2016年12月16日 16:52
  • 1949

ES6 字符串

1.字符串大小写转换 method.toLowerCase() method.toUpperCase() 2.字符串b是否在字符串a中出现 str.indexOf(stringb) !== -1...

前端学习总结(十八)ES6——新一代的javascript

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已于2015年6月正式发布。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言...

ES6 新增字符串函数

StringstartsWith() //检查是否以指定字符串开头,返回布尔值 let str = 'javascript'; str.startsWith('java'); endsWit...

ES6学习笔记(六)--set,map数据结构和for...of遍历

Set新的数据解构,成员值是唯一的//不能添加相同的值 var s = new Set();[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));for (let i of...
  • SirM2z
  • SirM2z
  • 2016年06月01日 17:18
  • 3479

Node.js开发入门—Angular简单示例

提供了一个使用AngularJS的简单demo,演示了如何在Node.js和express里引入AngularJS
  • foruok
  • foruok
  • 2015年08月14日 06:51
  • 12353

ES6 学习笔记之《字符串的扩展》

for-of ES6为字符串添加了遍历器接口,使得字符串可以被for-of循环遍历。 for(let i of 'foo'){ console.log(i) } //'f' //'o' //...

ES6学习笔记(字符串拓展)

ES6对于字符串的拓展

ES6新特性学习笔记—数字、数组、字符串

一、let和constlet:声明变量,只在声明的块级作用域(大括号)内起作用[注意:let不向var那样可以自动提升]如果一个区块内存在let或const命令,该区块就被解析成封闭作用域(暂时性死区...
  • fareise
  • fareise
  • 2016年09月30日 20:42
  • 2573
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ES6学习笔记(三)--字符串扩展
举报原因:
原因补充:

(最多只允许输入30个字)