首页 > web前端 > js教程 > es6的基础介绍--字符串的拓展

es6的基础介绍--字符串的拓展

零下一度
发布: 2017-05-16 10:04:17
原创
1442 人浏览过

1 for...of 字符串的遍历接口

for(let i of "abc"){
    console.log(i);
}
// a
// b
// c
登录后复制

2 includes 是否包含某字符串,返回布尔值

格式:str.includes(searchString[, position])
与indexOf的对比:
indexOf:返回下标,判断是否包含某字符串,下标是字符串的位置
includes:返回布尔值,是否包含某字符串,如果只是判断字符串中包含,此法可行。

var s = "hello";
// es5
s.indexOf("o"); // 4
// es6
s.includes("o"); // true
s.includes("d"); // false
s.includes("h", 2); // false 从第三个字符开始找
登录后复制

3 startsWith 参数字符串是否在源字符串的头部,返回布尔值

格式:str.startsWith(searchString[, position])

var s = "hello world";
// es5
s.indexOf("hello"); // 0 等于0表示就在源字符串头部
// es6
s.startsWith("hello"); // true
s.startsWith("world"); // false
s.startsWith("world", 6); // true
登录后复制

4 endsWith 跟startsWith相反,表示参数字符串是否在源字符串的尾部,返回布尔值

格式:str.endsWith(searchString[, position])

var s = "hello world";
// es5
String.prototype.endWith=function(endStr){
  var d=this.length-endStr.length;
  return (d>=0&&this.lastIndexOf(endStr)==d)
}
s.endWith("world"); // true
// es6
s.endsWith("world"); // true
s.endsWith("world", 5); // false
s.endsWith("hello", 5); // true
登录后复制

5 repeat 将原字符串重复n次,返回一个新字符串

var s = "s";
s.repeat(3); // sss
s.repeat(2.6); // ss 小数会被取整
s.repeat(-2); // RangeError 报错
s.repeat(0); // ""
登录后复制

6 模板字符串 是增强版的字符串,用反引号(`)标识。

它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量,好处相当明显,不用再拼接字符串,使用模板字符串内部可以使用变量了。

// es5 输出模板通常是如下格式,相当繁琐还不方便
var name="Bob",time="today";
var resultStr = "hello "+name+", how are you "+time+'?'; //hello Bob, how are you today?
// es6 模板字符串
console.log(`string text line 1
string text line 2`);
//string text line 1
//string text line 2

// 直接用${变量名}表示
`Hello ${name}, how are you ${time}?` // Hello Bob, how are you today?
// 使用表达式
var obj={a:1,b:2};
`${obj.a+obj.b}` // 3
// 使用函数
function fn() {
  return "Hello World";
}
`this is fn return str: ${fn()}` // this is fn return str: Hello World
登录后复制

具体es6关于字符串的变化、拓展请查看MDN官网

【相关推荐】

1. 特别推荐“php程序员工具箱”V0.1版本下载

2. 免费js在线视频教程

3. php.cn独孤九贱(3)-JavaScript视频教程

以上是es6的基础介绍--字符串的拓展的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板