共计 4739 个字符，预计需要花费 12 分钟才能阅读完成。
本文是 重温基础 系列文章的第八篇。今日感受：人在异乡，也不能忘记汤圆。
系列目录：
【复习资料】ES6/ES7/ES8/ES9 资料整理(个人整理)
【重温基础】1. 语法和数据类型
【重温基础】2. 流程控制和错误处理
【重温基础】3. 循环和迭代
【重温基础】4. 函数
【重温基础】5. 表达式和运算符
【重温基础】6. 数字
【重温基础】7. 时间对象
本章节复习的是 JS 中的字符串，还有字符串的相关属性和方法。
前置知识：JavaScript 中的字符串的每个元素，在字符串中都占据一个位置，第一个元素的索引值为 0，往后累加，另外创建字符串有 2 个方法：
1. 字面量创建：
let a = ‘hello’; // “hello”
typeof a; // “string”
2. 字符串对象创建：
let a = new String(‘hello’); //String {“hello”}
typeof a; // “object”
实际开发中，除非必要，建议使用字面量创建，因为两种创建方法会有差异：
let a1 = “1+1”;
let a2 = new String(“1+1”);
eval(a1); // number 2
eval(a2); // string “1+1”
String 有一个 length 属性，表示字符串中字符个数：
let a = “hello”;
a.length; // 5
1.String 对象方法：
String 对象的方法非常多，建议大家可以到 W3school JavaScript String 对象 学习完整的内容。
方法
描述
charAt, charCodeAt, codePointAt
返回字符串指定位置的字符或者字符编码。
indexOf, lastIndexOf
分别返回字符串中指定子串的位置或最后位置。
startsWith, endsWith, includes
返回字符串是否以指定字符串开始、结束或包含指定字符串。
concat
连接两个字符串并返回新的字符串。
fromCharCode, fromCodePoint
从指定的 Unicode 值序列构造一个字符串。这是一个 String 类方法，不是实例方法。
split
通过将字符串分离成一个个子串来把一个 String 对象分裂到一个字符串数组中。
slice
从一个字符串提取片段并作为新字符串返回。
substring, substr
分别通过指定起始和结束位置，起始位置和长度来返回字符串的指定子集。
match, replace, search
通过正则表达式来工作.
toLowerCase, toUpperCase
分别返回字符串的小写表示和大写表示。
normalize
按照指定的一种 Unicode 正规形式将当前字符串正规化。
repeat
将字符串内容重复指定次数后返回。
trim
去掉字符串开头和结尾的空白字符。
1.1 charAt
作用：查找字符串中指定位置的内容。str.charAt(index) index : 查找的字符的下标(大于等于 0，若小于 0 则返回空字符串)，若没传则表示 1。
let a = “hello leo!”
a.charAt(); // “h”
a.charAt(1); // “e”
a.charAt(-1);// “”
1.2.indexOf 和 lastIndexOf
作用：查找指定字符串的位置。indexOf 和 lastIndexOf 相同点：两者接收的参数一致，没有查到内容，返回 -1。indexOf 和 lastIndexOf 不同点：若查找到内容，则 indexOf 返回第一次出现的索引而 lastIndexOf 返回最后一次出现的索引。
str.indexOf(value[, fromIndex])接收 2 个参数：
value : 需要查找的字符串内容；
fromIndex : 可选，开始查找的位置，默认 0；
let a = ‘hello leo’;
let b = a.indexOf(‘lo’); // 3
let c = a.indexOf(‘lo’,4);// -1
let e = a.lastIndexOf(‘l’); // 6
一定要注意：
当 fromIndex > a.length，则 fromIndex 被视为 a.length。
let a = ‘hello leo’;
let b = a.indexOf(‘lo’,99);// -1
当 fromIndex < 0，则 fromIndex 被视为 0。
let a = ‘hello leo’;
let b = a.indexOf(‘lo’,-1);// 3
indexOf 和 lastIndexOf 区分大小写。
let a = ‘hello leo’;
let b = a.indexOf(‘Lo’); // -1
1.3 concat
作用：连接字符串。concat()接收任意个参数作为连接的字符串，返回一个合并后的新字符串。
let a = ‘hello’;
let b = ‘ leo ‘;
let c = ‘!’
a.concat(b,c); // “hello leo !”
1.4 split
作用：把字符串分割为字符串数组，并可以指定分隔符。split(separator[,limit])可以接收 2 个参数：
separator：必需，字符串或者正则表达式，作为分割的内容；
limit：可选，作为指定返回的数组的最大长度；
若 separator 为 ””，则字符串会在每个字符之间分割；
let a = ‘How are you doing today?’;
a.split();
// [“How are you doing today?”]
a.split(“”);
// [“H”, “o”, “w”, ” “, “a”, “r”, “e”, ” “, “y”, “o”, “u”, ” “, “d”, “o”, “i”, “n”, “g”, ” “, “t”, “o”, “d”, “a”, “y”, “?”]
a.split(” “);
// [“How”, “are”, “you”, “doing”, “today?”]
a.split(“”,4);
// [“H”, “o”, “w”, ” “]
a.split(” “,4);
// [“How”, “are”, “you”, “doing”]
使用其他分割符号：
let a = “ni,hao,a!”;
a.split(“,”); // [“ni”, “hao”, “a!”]
1.5 slice
作用：提取并返回字符串的片断。slice([start,end]) 可以接收 2 个参数：
start：要提取的片段的起始下标，若小于零，则从字符串尾部开始算起，如 - 1 表示字符串最后一个字符，- 2 为倒数第二个字符等等。
end：要提取的片段的结束下标，若没有传入，则表示从 start 到字符串结尾，若为负数则从字符串尾部开始算起。
let a = ‘How are you doing today?’;
a.slice(); // “How are you doing today?”
a.slice(1); // “ow are you doing today?”
a.slice(-1); // ‘?’
a.slice(1,5); // “ow a”
a.slice(1,-1); // “ow are you doing today”
a.slice(-2,-1); // “y”
2. 字符串拓展（ES6）
2.1 includes(),startsWith(),endsWith()
在我们判断字符串是否包含另一个字符串时，ES6 之前，我们只有 typeof 方法，ES6 之后我们又多了三种方法：
includes(): 返回布尔值，表示是否找到参数字符串。
startsWith(): 返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith(): 返回布尔值，表示参数字符串是否在原字符串的尾部。
let a = ‘hello leo’;
a.startsWith(‘leo’); // false
a.endsWith(‘o’); // true
a.includes(‘lo’); // true
并且这三个方法都支持第二个参数，表示起始搜索的位置。
let a = ‘hello leo’;
a.startsWith(‘leo’,1); // false
a.endsWith(‘o’,5); // true
a.includes(‘lo’,6); // false
endsWith 是针对前 n 个字符，而其他两个是针对从第 n 个位置直到结束。
2.2 repeat()
repeat 方法返回一个新字符串，表示将原字符串重复 n 次。基础用法：
‘ab’.repeat(3); // ‘ababab’
‘ab’.repeat(0); // ”
特殊用法:
参数为小数，则取整
‘ab’.repeat(2.3); // ‘abab’
参数为负数或 Infinity，则报错
‘ab’.repeat(-1); // RangeError
‘ab’.repeat(Infinity); // RangeError
参数为 0 到 - 1 的小数或 NaN，则取 0
‘ab’.repeat(-0.5); // ”
‘ab’.repeat(NaN); // ”
参数为字符串，则转成数字
‘ab’.repeat(‘ab’); // ”
‘ab’.repeat(‘3’); // ‘ababab’
2.3 padStart(),padEnd()
用于将字符串头部或尾部补全长度，padStart()为头部补全，padEnd()为尾部补全。这两个方法接收 2 个参数，第一个指定字符串最小长度，第二个用于补全的字符串。基础用法：
‘x’.padStart(5, ‘ab’); // ‘ababx’
‘x’.padEnd(5, ‘ab’); // ‘xabab’
特殊用法:
原字符串长度，大于或等于指定最小长度，则返回原字符串。
‘xyzabc’.padStart(5, ‘ab’); // ‘xyzabc’
用来补全的字符串长度和原字符串长度之和，超过指定最小长度，则截去超出部分的补全字符串。
‘ab’.padStart(5,’012345′); // “012ab”
省略第二个参数，则用空格补全。
‘x’.padStart(4); // ‘ x’
‘x’.padEnd(4); // ‘x ‘
2.4 模版字符串
用于拼接字符串，ES6 之前：
let a = ‘abc’ +
‘def’ +
‘ghi’;
ES6 之后：
let a = `
abc
def
ghi
`
拼接变量: 在反引号 (`) 中使用 ${}包裹变量或方法。
// ES6 之前
let a = ‘abc’ + v1 + ‘def’;
// ES6 之后
let a = `abc${v1}def`
3. 字符串拓展（ES7）
用来为字符串填充特定字符串，并且都有两个参数：字符串目标长度和填充字段，第二个参数可选，默认空格。
‘es8’.padStart(2); // ‘es8’
‘es8’.padStart(5); // ‘ es8’
‘es8’.padStart(6, ‘woof’); // ‘wooes8’
‘es8’.padStart(14, ‘wow’); // ‘wowwowwowwoes8’
‘es8’.padStart(7, ‘0’); // ‘0000es8’
‘es8’.padEnd(2); // ‘es8’
‘es8’.padEnd(5); // ‘es8 ‘
‘es8’.padEnd(6, ‘woof’); // ‘es8woo’
‘es8’.padEnd(14, ‘wow’); // ‘es8wowwowwowwo’
‘es8’.padEnd(7, ‘6’); // ‘es86666’
从上面结果来看，填充函数只有在字符长度小于目标长度时才有效，若字符长度已经等于或小于目标长度时，填充字符不会起作用，而且目标长度如果小于字符串本身长度时，字符串也不会做截断处理，只会原样输出。
参考资料
MDN Text formatting
W3school JavaScript String 对象
本部分内容到这结束
Author
王平安
E-mail
pingan8787@qq.com
博 客
www.pingan8787.com
微 信
pingan8787
每日文章推荐
https://github.com/pingan8787…
ES 小册
es.pingan8787.com
