Home  >  Article  >  Web Front-end  >  Basic introduction to es6--String expansion

Basic introduction to es6--String expansion

零下一度
零下一度Original
2017-05-16 10:04:171387browse

1 for...of String traversal interface

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

2 includes Whether a string is included, returning a Boolean value

Format: str.includes(searchString[, position])
Comparison with indexOf:
indexOf: Returns the subscript to determine whether a string is included. The subscript is the position of the string
includes :Returns a Boolean value to determine whether a string is contained. If you only want to determine whether a string is contained, this method is feasible.

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

3 startsWith Whether the parameter string is at the head of the source string, returns a Boolean value

Format: 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 is the opposite of startsWith, indicating whether the parameter string is at the end of the source string and returns a Boolean value

Format: 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 Repeat the original string n times and return a new string

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

6 The template string is an enhanced version of the string, identified by backticks (`).

It can be used as an ordinary string, or it can be used to define a multi-line string, or to embed variables in a string. The benefits are quite obvious. You don’t need to splice strings anymore. Use Variables can now be used inside template strings.

// 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

For specific changes and expansions of es6 strings, please check the MDN official website

[Related recommendations]

1. Special recommendation"php Programmer Toolbox" V0.1 version download

2. Free js online video tutorial

3. php.cn Dugu Jiujian (3) - JavaScript video tutorial

The above is the detailed content of Basic introduction to es6--String expansion. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn