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——新一代的javascript

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

ES6为字符串做了哪些扩展?

感觉之前看的ES6忘了许多,这两天再过一遍,加深理解。字符串的扩展简答说,ES6对字符串新增了一些函数和操作规范,使得开发者对字符串的操作更加方便,以往需要借助其他javascript代码才能实现的效...
  • github_37578362
  • github_37578362
  • 2017年05月03日 22:48
  • 455

ES6 字符串

1.字符串大小写转换 method.toLowerCase() method.toUpperCase() 2.字符串b是否在字符串a中出现 str.indexOf(stringb) !== -1...
  • xiaochun365
  • xiaochun365
  • 2017年05月16日 18:22
  • 1295

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

ES6对于字符串的拓展
  • aa3115386
  • aa3115386
  • 2016年07月28日 18:39
  • 2508

【ES6】字符串的扩展

1.字符的Unicode表示法 JavaScript允许采用\uxxxx形式表示一个字符,其中“xxxx”表示字符的码点。 "\u0061"// "a"但是,这种表示法只限于\u0000——\uFF...
  • lx583274568
  • lx583274568
  • 2016年07月28日 07:39
  • 5094

javascript的replace+正则 实现ES6的字符串模版

采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中。开始时代码量较少,暂时还可以接受。但当页面结构复杂起来后,其弱点开始变得无法忍受起来: 书写不连贯。每写一个变量就要断一下,插入一个 + 和...
  • wkyseo
  • wkyseo
  • 2016年05月20日 09:26
  • 1795

js-ES6学习笔记-字符串的扩展

(本文内容主要来自网上资料) 首先介绍Unicode字符集,它其实是一个包含全世界所有字符的集合,通过它,计算机可以解析所有的字符,不再会出现代码。 而javascript支持的是UCS-2编码。...
  • qq_33204572
  • qq_33204572
  • 2017年06月04日 20:17
  • 64

es6-特性整理

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

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

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

JS之字符串截取方法substring

js
  • tian361zyc
  • tian361zyc
  • 2017年06月14日 09:55
  • 260
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ES6学习笔记(三)--字符串扩展
举报原因:
原因补充:

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