Basic introduction to es6--String expansion

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!