【重温基础】8.字符串

本文是 重温基础 系列文章的第八篇。
今日感受：人在异乡，也不能忘记汤圆。

系列目录：

• 【复习资料】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

一定要注意：

1. 当fromIndex > a.length，则fromIndex被视为a.length。

let a = 'hello leo';  
let b = a.indexOf('lo',99);// -1

1. 当fromIndex < 0，则fromIndex被视为0。

let a = 'hello leo';  
let b = a.indexOf('lo',-1);// 3

1. 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'

从上面结果来看，填充函数只有在字符长度小于目标长度时才有效，若字符长度已经等于或小于目标长度时，填充字符不会起作用，而且目标长度如果小于字符串本身长度时，字符串也不会做截断处理，只会原样输出。

参考资料

1. MDN Text formatting
2. W3school JavaScript String 对象

---

本部分内容到这结束

Author	王平安
E-mail	[e-mail]
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推荐	https://github.com/pingan8787...
JS小册	js.pingan8787.com

欢迎关注微信公众号【前端自习课】每天早晨，与您一起学习一篇优秀的前端技术博文 .