ES6（三）-模板字符串和字符串方法

模板字符串

模板字符串是增强版的字符串，用反引号(`)标识，特点：

• 字符串中可以出现换行
• 可以使用 ${xxx} 形式输出变量

let age = 20;
let add = '江苏';
// let str = '我今年'+age+'岁，我是'+add+'人';
//1. 模板变量${age}
let str = `我今年${age}岁，我是${add}人`;
console.log(str); 

//2. 可以换行
let content = `<div>
            <h2>标题</h2>
            <p>这是一段文字</p>
            </div>`;
console.log(content)

注意：当遇到字符串与变量拼接的情况使用模板字符串

字符串方法（总结版）

1. chatAt()和chatCodeAt()

• charAt() 方法获取到的是指定位置的字符；
• charCodeAt()方法获取的是指定位置字符的Unicode值。

const str = 'hello';
console.log(str.charAt(2));   //'l'
console.log(str.charAt(6));   //''
console.log(str.charCodeAt(1)); //'e'--101

2. at()

返回参数指定位置的字符

参数如果是正整数返回指定位置字符，如果是负数是倒数的位置。如果参数位置超出了字符串范围，返回undefined；如果参数是小数会向下取整，如果参数是0~-1间的小数等同于0，如果参数是NaN等同于0。

const str = 'hello,abc';
console.log(str.at(1)); // e
console.log(str.at(-2)); // b
console.log(str.at(1.7)); // e
console.log(str.at(0.7)); // h
console.log(str.at(NaN)); // h
console.log(str.at(19)); // undefined

3. indexOf()和lastIndexOf()

第一个参数是检索的字符串值；第二个参数可选，检索开始的位置，默认从首字符开始

• indexOf()方法查找某个字符第一次出现的位置，有返回位置没有返回-1
• lastIndexOf()方法查找某个字符最后一次出现的位置，有返回位置没有返回-1

const str = 'hello';
console.log(str.indexOf('h'));   //0
console.log(str.indexOf('l', 3));   //3
console.log(str.lastIndexOf('e')); //1
console.log(str.lastIndexOf('l')); //3

4. includes()

判断字符串是否包含指定的子字符串，如果找到匹配的字符串则返回 true，否则返回 false。

第一个参数是查找的字符串值；第二个参数可选，检索开始的位置

const str = 'hello';
console.log(str.includes('h'));   //true
console.log(str.includes('o', 3));   //true
console.log(str.includes('a')); //false

5. startsWith()和endsWith()

第一个参数是查找的字符串值；第二个参数可选，开始的位置

• startsWith()方法检测字符串是否以指定的字符串开始，是返回true，否返回false
• endsWith()方法检测是否以指定的字符串结尾，是返回true，否返回false

const str = 'hello';
console.log(str.startsWith('he'));   //true
console.log(str.endsWith('h', 3));   //false
console.log(str.endsWith('l')); //false

6. concat()

连接两个或多个字符串。该方法没有改变原有字符串。

const str = 'hello';
const str1 = 'Javascript'
let s = str.concat(str1)
console.log(s);             // helloJavascript
console.log(s.concat('!')); // helloJavascript!

7. split()

用于把一个字符串分割成字符串数组。该方法不会改变原始字符串。

第一个参数字符串或正则，从该参数地方进行分割；第二个参数可选，可指定返回的数组的最大长度

const str1 = 'Javascript'
console.log(str1.split('s'));   // ['Java', 'cript']
console.log(str1.split(''));    // ['J', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']
console.log(str1.split('s', 1));// ['Java']

8. slice()

用于提取字符串的某个部分

第一个参数起始下标，如果是负数就从尾部开始；第二参数可选，结尾下标，如果未指定默认截取到最后一个字符，若指定则不包括结束处的字符

const str1 = 'Javascript'
console.log(str1.slice(1));   // avascript
console.log(str1.slice(1, 9));    // avascrip
console.log(str1.slice(-2));// pt

9. substr()和substring()

• substr() 方法用于在字符串中抽取从开始下标的指定数目的字符。第一个参数起始下标，如果是负数就从尾部开始；第二个参数可选，表示新字符串长度也可以理解为包括结束处字符
• substring() 方法用于提取字符串中介于两个指定下标之间的字符。第一个参数起始下标，非负整数；第二参数可选，结尾下标，如果未指定默认截取到最后一个字符，若指定则不包括结束处的字符

const str1 = 'Javascript'
console.log(str1.slice(1));   // avascript
console.log(str1.slice(1, 9));    // avascrip
console.log(str1.slice(-2));// pt
console.log(str1.slice(8, 2));// ''

console.log(str1.substr(1));   // avascript
console.log(str1.substr(1, 9));    // avascript
console.log(str1.substr(-2));// pt
console.log(str1.substr(8, 2)); // pt

console.log(str1.substring(1));   // avascript
console.log(str1.substring(1, 9));    // avascrip
console.log(str1.substring(-2));// Javascript
console.log(str1.substring(8, 2));  // vascri 相当于[2,8)

10. toLowerCase()和toUpperCase()

• toLowerCase()用于把字符串转换为小写
• toUpperCase()用于把字符串转换为大写

const str = 'hello';
const upStr = 'ABC';
console.log(str.toUpperCase()); //HELLO
console.log(upStr.toLowerCase()); //abc

11. replace()和replaceAll()

用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。replace()只能替换第一个匹配，replaceAll()可以替换所有匹配且表达式必须设置为 g

第一个参数规定子字符串或要替换的模式的 RegExp 对象（正则表达式）；第二个字符串规定了替换文本或生成替换文本的函数。

const str = 'hello,abc';
console.log(str.replace('abc', 'JavaScript')); // hello,JavaScript
console.log(str.replaceAll(/l/g, 'a'));   // heaao,abc

12. match()和matchAll()

用于在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，如果传入的不是正则表达式，则会隐式的调用new RegExp(obj) 将其转为正则表达式。

类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

macth()只能返回第一个匹配，matchAll()可以返回所有匹配且表达式必须设置为 g (全局模式)否则会报错

const str = 'hello,abc';
console.log(str.match('l')); // ['l', index: 2, input: 'hello,abc', groups: undefined]
console.log(...str.matchAll(/l/g));
// ['l', index: 2, input: 'hello,abc', groups: undefined] 
// ['l', index: 3, input: 'hello,abc', groups: undefined]

13. search()

用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。有返回位置没有返回-1

该方法和 indexOf() 区别在于参数可以是正则表达式，如果只是搜索具体字符串推荐indexOf()，效率高

const str = 'hello,abc';
console.log(str.search('l')); // 2
console.log(str.search(/abc/)); // 6
console.log(str.search(/Abc/)); // -1

14. trim()、trimStart()和trimEnd()

• trim() 方法用于移除字符串首尾空白符
• trimStart() 方法返回一个从原始字符串的开头删除了空白的新字符串，不会修改原始字符串
• trimEnd() 方法返回一个从原始字符串的结尾删除了空白的新字符串，不会修改原始字符串

const str = ' hello ';
console.log(str.trim()); // 'hello'
console.log(str.trimStart()); // 'hello '
console.log(str.trimEnd()); // ' hello'

15. valueOf()

用于返回指定对象的原始值，若对象没有原始值，则将返回对象本身。通常由JavaScript内部调用，而不是在代码中显式调用。

const str = 'hello';
console.log(str.valueOf() === str); //true

16. toString()

返回字符串对象本身，将其他类型数据转换成字符串

const str = 1;
console.log(typeof (str.toString())); //string

17. repeat()

返回一个新字符串，表示将原字符串重复n次。如果参数是小数会向下取整，如果参数是负数会报错，如果参数是0~-1间的小数等同于0，如果参数是NaN等同于0，如果参数是字符串会先转换成数字

const str = 'hello';
console.log(str.repeat(2)); //hellohello
console.log(str.repeat(2.6)); //hellohello
console.log(str.repeat(0.2)); //''
console.log(str.repeat(-0.1)); //''
console.log(str.repeat(NaN)); //''
console.log(str.repeat('2')); //hellohello
console.log(str.repeat('he')); //''

18. padStart()和padEnd()

padStart()用于头部补全，padEnd()用于尾部补全。

第一个参数是数字，表示补齐之后的长度；第二个参数是用来补全的字符串

const str = 'hello';
console.log(str.padStart(2, 'x')); //hello
console.log(str.padStart(8, 'xy')); //xyxhello
console.log(str.padEnd(2, 'p')); //hello
console.log(str.padEnd(8, 'o')); //helloooo

19. parseInt()和parseFloat()

字符串转为数字，如果字符串的第一个字符不能被转换为数字，就会返回 NaN

• parseInt()返回整数，第一个参数是要被解析的字符串，第二个参数可选，要解析的数字的基数2~36之间
• parseFloat()返回浮点数

console.log(parseInt('10')); //10
console.log(parseInt('10', 2)); //2
console.log(parseInt(' 10 ')); //10
console.log(parseInt('20 years')); //20
console.log(parseFloat('10.03')); //10.03
console.log(parseFloat('20.02 years')); //20.02