js梳理笔记（一） - 字符串操作方法

红宝书学习笔记

第一章：字符串操作方法

---

第一章：字符串操作方法

---

一、concat()

concat(),用于将一个或多个字符串拼接成一个新字符串。
结果：得到新的字符串的，但不会改变旧的变量值。可以一次性拼接多个字符串

例：

// 例1：
let stringValue = "hello";
let result = stringValue.concat(" world")
console.log(result); // "hello world"
console.log(stringValue); // "hello"

// 例2：
let val = "hello";
let res = val.concat(" world","!");
console.log(res); // hello world!

虽然concat()方法可以拼接字符串，但是更常用的方式是使用加号操作符（+）。而且多数情况下，对于拼接字符串来说，使用+更方便。

二、slice()、substr()、substring()

这三个方法都可用于从字符串中提取子字符串。

共同点：

• 都返回一个新的子字符串，不会修改调用他们的字符串。
• 都接收一个或两个参数。
• 任何情况下，省略第二个参数都意味着提取到字符串末尾。

不同点：

1. 第二个参数值含义不同：

• slice() 方法和 substring() 方法的第二个参数值表示 提取结束的位置。
• substr() 方法的第二个参数值表示 子字符串的长度。

2. 当参数值为负值时处理方式不同：

• slice() 方法将所有负参数值 转换为 字符串长度加上负参数值。
• substr() 方法将第一个负参数值转换为 字符串长度加上负参数值，将第二个负参数值转换为0 。
• substring() 方法将所有负参数值 转换为 0 。

1.slice()

第一个参数表示：子字符串开始的位置；第二个参数表示：提取结束的位置（即该位置之前的字符会被提取出来）。
例：

let stringValue = "hello world";
console.log(stringValue.slice(3));  // "lo world"  打印结果为从位置为3开始到字符串末尾的子字符串
console.log(stringValue.slice(3,7)); // "lo w"    打印结果为从位置为3开始到位置为7的子字符串（不包含7）
console.log(stringValue.slice(-3));  // "rld"     负值会被转换成 字符串长度加上负值，即：11-3=8，slice(8);然后按情况一处理
console.log(stringValue.slice(3,-4); // "lo w"    负值会被转换成 字符串长度加上负值，即：11-4=7，slice(3,7);然后按情况二处理

2.substr()

第一个参数表示：子字符串开始的位置；第二个参数表示：返回的子字符串的长度。
例：

let stringValue = "hello world";
console.log(stringValue.substr(3));  // "lo world"  打印结果为从位置为3开始到字符串末尾的子字符串
console.log(stringValue.substr(3,7)); // "lo worl"    打印结果为从位置为3开始到子字符串长度为7结束
console.log(stringValue.substr(-3));  // "rld"     第一个负值会被转换成 字符串长度加上负值，即：11-3=8，substr(8);然后按情况一处理
console.log(stringValue.substr(3,-4); // ""    第二个负值会被转换成0，即：substr(3，0);然后按情况二处理，长度为0，返回值为空

3.substring()

第一个参数表示：子字符串开始的位置；第二个参数表示：提取结束的位置（即该位置之前的字符会被提取出来）。
例：

let stringValue = "hello world";
console.log(stringValue.substring(3));  // "lo world"  打印结果为从位置为3开始到字符串末尾的子字符串
console.log(stringValue.substring(3,7)); // "lo w"    打印结果为从位置为3开始到位置为7的子字符串（不包含7）
console.log(stringValue.substring(-3));  // "hello world"     负值会被转换成0，即：substring(0);然后按情况一处理，返回全部
console.log(stringValue.substring(3,-4); // "hel"    负值会被转换成0，即：substring(3，0);然后按情况二处理

三、indexOf() 、lastIndexOf()

用于在字符串中定位子字符串

共同点：

• 在字符串中搜索传入的字符串，并返回位置；如果没找到，返回-1。
• 可以接收两个参数，第一个参数为要搜索的子字符串，第二个参数为开始搜索的位置。

不同点：

• indexOf() 方法从字符串开头开始查找子字符串
• lastIndexOf() 方法从字符串末尾开始查找子字符串
  用法：

// 例1：
let stringValue = "hello world";
console.log(stringValue.indexOf("o")); // 4
console.log(stringValue.lastIndexOf("o")); // 7

// 例2：
let stringValue = "hello world";
console.log(stringValue.indexOf("o",6)); // 7  从正数第六位开始查，忽略前六位的值，因此返回7
console.log(stringValue.lastIndexOf("o",6)); // 4  从倒数第六位开始查，忽略末6位的值，因此返回4

四、startsWith()、endsWith()、includes()

字符串包含方法。返回值为表示是否包含的布尔值。

1. startsWith() :

只有一个参数值时，检查开始于索引0的匹配项； 有两个参数时，检查开始于索引n的匹配项。
例：

let message = "foobarbaz";
console.log(message.startsWith("foo")); // true  
console.log(message.startsWith("bar")); // false
console.log(message.startsWith("foo",1)); // false  

2. endsWith() :

只有一个参数值时，检查开始于索引string.length - substring.length的匹配项； 有两个参数时，检查开始于索引 n - substring.length的匹配项。
例：

let message = "foobarbaz";
console.log(message.endsWith("baz")); // true  
console.log(message.endsWith("bar")); // false
console.log(message.endsWith("bar",6)); // true  

3. includes()

只有一个参数时，检查整个字符串中是否包含了另一个字符串。有两个参数时，第二个参数表示开始搜索的位置。
例：

let message = "foobarbaz";
console.log(message.includes("bar")); // true  
console.log(message.includes("qwe")); // false
console.log(message.startsWith("bar",4)); // false  

五、trim()

删除前后空格的方法。返回值为去掉前后空格的新的值，不改变旧变量值。
例：

let stringValue = " hello world ";
let str = stringValue.trim();
console.log(str); // "hello world"
console.log(stringValue); // " hello world "

六、repeat()

复制。接收一个整数参数，表示要将字符串复制多少次，返回拼接所有副本后的结果。
例：

let stringValue = "na ";
console.log(stringValue.repeat(4) + "batman");// "na na na na batman"

七、padStart() 、padEnd()

复制。接收两个参数，第一个是长度，第二个是可选的填充字符串。用于 目标字符串小于该长度时，填充字符串至等于该长度。

1. padStart()

例：

let stringValue = "foo";
console.log(stringValue.padStart(6)); // "   foo"
console.log(stringValue.padStart(6,".")); // "...foo"
console.log(stringValue.padStart(6,"st")); // "stsfoo"

2. padEnd()

例：

let stringValue = "foo";
console.log(stringValue.padEnd(6)); // "foo   "
console.log(stringValue.padEnd(6,".")); // "foo..."
console.log(stringValue.padEnd(6,"st")); // "foosts"

八、toLowerCase()、toLocalLowerCase()、toUpperCase()、toLocalUpperCase();

大小写转换。
toLocalLowerCase()和toLocalUpperCase() 旨在基于特定地区实现大小写转换。如土耳其语。如果不知道代码设计什么语言，最好使用地区特定的转换方法。

九、match()、search()、replace()、split()

1. replace()

替换。这个方法接收两个参数，第一个参数可以是一个 RegExp 对象或一个字符串（这个字符串不回转换为正则表达式），第二个参数为一个字符串或一个函数。
例：

// 例1：
let str = "cat,bat,sat,fat";
let result = str.replace('at',"ond");
console.log(result); //  "cond,bat,sat,fat"
// 例2：
result = str.replace(/at/g,"ond");
console.log(result); //  "cond,bond,sond,fond"

2.split()

拆分。根据传入的分隔符将字符串拆分成数组。
如果没有传参数，则全部拆分。如果传入一个字符/字符串，则根据传入的字符进行拆分。如果传入两个参数，第一个值可以是字符串也可以是 RegExp 对象，第二个值为数组大小，保证返回的数组不回超过指定大小。
例：

let colorText = "red,blue,pink,green";
let colors1 = colorText.split(","); // ["red", "blue", "pink", "green"]
let colors2 = colorText.split(",",2); // ["red", "blue"]
let colors3 = colorText.split(/[^,]+/); // ["", ",", ",", ",", ""]

不要在沙砾上盖大厦

从事前端工作4年，一直没找到学习方法，培训班大都旨在教会你如何“板砖”，怎么遇到问题时尽快解决问题，怎么想方设法完成到手的任务，自学时没有好的老师指导，也只学会了在工作过程中被动地输入。前端知识庞杂，没有知识体系，没有学习方向，一味地在沙砾上盖房子，终究只能面临坍塌。面试过程当中，一位大厂的面试官，许是看我太焦虑而不知所措，给我推荐了红宝书，建议我重新系统地研读此类书籍，打好底子，再谋发展。初读前三章，方把之前一些错误的概念纠正，把一些模糊的概念明晰。脑力有限，将一些必要的东西记录下来。