String字符串方法

ゝ一世哀愁。 2022-11-29 05:46 232阅读 0赞

### **字符串的方法都不会改变原字符串，因为JavaScript中字符串的值是不可改变的。** ###

**`0、String`** 全局对象是一个用于字符串或一个字符序列的构造函数。

三个知识点至关重要：

（1）构造字符串的形式，构造函数或字面量

var str1 = new String("abcd");
    var str2 = "abcd";

![20200821194548285.png][]

ES6的模板字面量：

`hello world` `hello! world!` `hello ${who}` escape `<a>${who}</a>`

（2）String()转为字符串比toSting()方法更好

因为不同类型的数值在调用toSting方法的时候，都是调用他们自己重写的toString方法，而undefined和null没有该方法，不可以通过toString方法转为字符串。但是String()不一样，将数据传入String()方法中，都可以转为字符串，甚至是undefined和null。

（3）转义字符在字符串中代表特殊含义**（字符串中，谨慎使用哦）**

<table> 
 <thead> 
  <tr> 
   <th>Code</th> 
   <th>Output</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>\0</code></td> 
   <td>空字符</td> 
  </tr> 
  <tr> 
   <td><strong><code>\'</code></strong></td> 
   <td><strong>单引号</strong></td> 
  </tr> 
  <tr> 
   <td><strong><code>\"</code></strong></td> 
   <td><strong><code>双引号</code></strong></td> 
  </tr> 
  <tr> 
   <td><strong><code>\\</code></strong></td> 
   <td><strong>反斜杠</strong></td> 
  </tr> 
  <tr> 
   <td><code>\n</code></td> 
   <td>换行</td> 
  </tr> 
  <tr> 
   <td><code>\r</code></td> 
   <td><code>回车</code></td> 
  </tr> 
  <tr> 
   <td><code>\v</code></td> 
   <td>垂直制表符</td> 
  </tr> 
  <tr> 
   <td><code>\t</code></td> 
   <td>水平制表符</td> 
  </tr> 
  <tr> 
   <td><code>\b</code></td> 
   <td>退格</td> 
  </tr> 
  <tr> 
   <td><code>\f</code></td> 
   <td>换页</td> 
  </tr> 
  <tr> 
   <td><code>\uXXXX</code></td> 
   <td>unicode 码</td> 
  </tr> 
 </tbody> 
</table>

**1、charAt() 方法从一个字符串中返回指定索引的字符。**

str.charAt(index)

字符串中的字符从左向右索引，第一个字符的索引值为 0，最后一个字符（假设该字符位于字符串 stringName 中）的索引值为 `stringName.length - 1`。 如果指定的 index 值超出了该范围，则返回一个空字符串。

**2、`charCodeAt()` 方法返回 `0` 到 `65535` 之间的整数，表示给定索引处的 UTF-16 代码单元**

UTF-16 编码单元匹配能用一个 UTF-16 编码单元表示的 Unicode 码点。如果 Unicode 码点不能用一个 UTF-16 编码单元表示（因为它的值大于`0xFFFF`），则所返回的编码单元会是这个码点代理对的第一个编码单元) 。

**注意：\\u不能和变量拼接，要直接和码值拼接**

var str = "我是谁";
    var code10 = str.charCodeAt(0); //25105
    var code10to16 = code10.toString(16); //6211
    console.log("\u6211") //我

### **关于进制的转换** ###

**（1）数字的toString方法，**可以接收一个参数，表明转为多少进制的字符串。不传参数，默认把数字转为10进制的字符串，就是把数字类型转为同样值的字符串类型

数字默认转为同等值的字符串：

console.log((65535).toString())  65535

数字转为指定进制的字符串：

console.log((65535).toString(16)) ffff

**（2）parseInt方法：输出十进制整数**，可以指定该数字是多少进制的数字，即将多少进制的数字转为十进制数字

console.log(parseInt("FFFF",16))  65535

如果该数字自身有指定类型，不必再指定，如果再指定，将会进行两次转换

console.log(parseInt(0xffff))  65535

如果再指定进制，0xffff转为十进制的数字，再按指定进制表明该数字是多少进制数字，再转为10进制

比如：0xffff是十进制的65535，而又指明65535为32进制，那么32进制的65535输出的10进制数是6460517

console.log(parseInt(0xffff,32))  6460517

**3、`concat()` 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。如果参数不是字符串类型，它们在连接之前将会被转换成字符串。**

**字符串在处理每项值的时候，都会调用String(），该项值转为字符串**

关于性能：强烈建议使用[赋值操作符][Link 1]（`+`, `+=`）代替 `concat` 方法。

console.log(undefined + "" + null); //undefinednull

如果要把每项转为字符串后再进行拼接，那么每项都会被String()方法转为字符串，包括undefined和null值

String(["a",["b"]]) //a,b
    String(undefined); //undefined

由于undefined和null没有toString方法，所以此处不是调用自己的toString方法（不同类型的值实现的toString方法不同）

console.log(["a",["b"]].toString())  //a,b
    console.log(undefined.toString())  //TypeError: Cannot read property 'toString' of undefined

回到concat方法，例如：

var str = "a";
    console.log(str.concat(1, ["a",["b"]], true, undefined,null));
    a1a,btrueundefinednull

拼接时，大数组中的每项会按字符串的特性处理，但是每项中的项，按该项值的特性处理：

**数组在处理undefined和null为字符串时，将其转换为空字符。**

console.log("".concat(1, ["a",undefined,["b"]], true, undefined,null));
    
    1a,,btrueundefinednull

**拼接字符串，实际上是对每项执行String方法，不管是concat方法拼接还是 + 拼接。 **

**`4、indexOf()` 方法返：回字符串中，指定片段的第一次出现的index索引值。从 `fromIndex` 处进行搜索。如果未找到该值，则返回 -1。**

var str = "abcdefg";
    console.log(str.indexOf("ab")) //0

可以接收第二个参数，index值，表明从字符串的index位置开始查找

var str = "abcdefg";
    console.log(str.indexOf("ab",2)) //-1

**`lastIndexOf()`** 方法返回调用[`String`][String] 对象的指定值**最后的索引**，在一个字符串中的指定位置 `fromIndex`处**从后向前搜索。**如果没找到这个特定值则返回-1 。

**`lastIndexOf()`**该方法将从尾到头地检索字符串 *str*，看它是否含有子串 *searchValue*。开始检索的位置在字符串的 *fromIndex* 处或字符串的结尾（没有指定 *fromIndex* 时）。返回检索到的index值

**从结尾开始检索，或者从指定的index处开始往头检索**

** 5、`localeCompare()` 方法返回一个数字来比较两个字符串的第一项字符在本地排序中是在之前还是在之后。**

**`localeCompare()方法的兼容性比较好，但是该方法里面的还可以接收两个参数，参数的兼容性是IE11`**

返回一个数字表示是否 **引用字符串** 在排序中位于 **比较字符串** 的前面，后面，或者二者相同。

*  当 **引用字符串 **在 **比较字符串 **前面时返回 -1
 *  当 **引用字符串** 在 **比较字符串 **后面时返回 1
 *  相同位置时返回 0

**切勿依赖于 -1 或 1 这样特定的返回值。**不同浏览器之间（以及不同浏览器版本之间）** **返回的正负数的值各有不同，因为W3C规范中只要求返回值是正值和负值，而没有规定具体的值。一些浏览器可能返回-2或2或其他一些负的、正的值

比如：字符串“abc”和字符串“xyz”相比，a在x前面，所以返回-1

var str1 = "abc";
    var str2 = "xyz";
    console.log(str1.localeCompare(str2))   -1

比如：汉字的对比，第一个字符的拼音首字母

var str1 = "我wo";
    var str2 = "你ni";
    console.log(str1.localeCompare(str2))  1

**我比你的值更大，返回1**

比如：数字的对比，字符串形式的数字进行对比，也是获取数字的第一个字符 12中的1 在 4的前面

注意：数字不可以直接调用localeCompare方法，因为这是字符串方法

var str1 = "12";
    var str2 = "4";
    console.log(str1.localeCompare(str2))  -1

刚好可以结合数组的sort方法，进行排序：

**[此处也有对字符串的方法总结，尤其是localeCompare方法的使用][localeCompare]**

### 6、还有几个与正则表达式相关的方法： ###

[search()、split()、replace()、match()方法，参考该文章][search_split_replace_match]

**`7、slice()`** 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

**实例理解：从第几位开始，截取几个**

str.slice(beginIndex[, endIndex])。注意提取的范围：[beginIndex,endIndex) 左闭右开！

`beginIndex`：从该索引（以 0 为基数）处开始提取原字符串中的字符。如果值为负数，会被当做 `strLength + beginIndex` 看待，这里的`strLength` 是字符串的长度。

`endIndex`：可选。在该索引（以 0 为基数）处结束提取字符串。如果省略该参数，`slice()` 会一直提取到字符串末尾。如果该参数为负数，则被看作是 strLength + endIndex，这里的 strLength 就是字符串的长度。

正数就是index的值，负数是 +str.length的==index的值

var str = "abcdefg";
    console.log(str.slice(0,1)) //a
    console.log(str.slice(4)) //efg
    console.log(str.slice(-3, -1))// 倒数第三个到倒数第一个  ef

** 如果是取字符串的后五个字符：**

str.slice(-5)

**`substring() `**方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

var str = "abcdefg";
    console.log(str.substring(0,1)) //a
    console.log(str.substring(4,6)) //ef

** 8、大小写的转换：**

**`toLocaleUpperCase()`** 方法根据本地主机语言环境把字符串转换为大写格式，并返回转换后的字符串。

**`toLocaleLowerCase()`**方法根据任何指定区域语言环境设置的大小写映射，返回调用字符串被转换为小写的格式。

**`toUpperCase()`** 方法将调用该方法的字符串转为大写形式并返回（如果调用该方法的值不是字符串类型会被强制转换）。

`toLowerCase()` 会将调用该方法的字符串值转为小写形式，并返回。

**`9、trim()` **方法会从一个字符串的两端删除空白字符。兼容性IE9

**`10、valueOf()`** 方法返回  [`String`][String]  对象的原始值。此方法通常由JavaScript在内部调用，而不是在代码中显式调用。

var str = "abcdefg";
    console.log(str.valueOf()) //abcdefg

`toString()` 方法返回指定对象的字符串形式。

`String` 对象覆盖了[`Object`][Object] 对象的 `toString` 方法；并没有继承 [`Object.toString()`][Object.toString]。对于 `String` 对象，`toString` 方法返回该对象的字符串形式，和 [`String.prototype.valueOf()`][String.prototype.valueOf] 方法返回值一样。

`字符串的toString()` 方法，返回字符串的字符串形式，是不是有点鸡肋，字符串本身就是字符串，但是调用了toString方法后还是字符串值。每个类型的数据都实现了自己的toSting方法，当然对象的toString根本不用重写，因为本来就是所有的数据类型继承的对象toString方法。

以下实例，**字符串的toString方法的作用：**

var str = new String("abcd");
    console.log(str, typeof str);
    console.log(str.toString(), typeof str.toString())

结果：

![2020082119212180.png][]

此文章对toSting进行了深入探讨！

### 11、ES6新增方法以及Polyfill ###

`endsWith()`方法用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回 `true` 或 `false`。

比如以下实例：是否是以fg结尾的

var str = "abcdefg";
    console.log(str.endsWith("fg")) //true

还可以接收第二个参数，表明从index的位置截掉。

var str = "abcdefg";
    console.log(str.endsWith("de",5)) //true

`startsWith()` 方法用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 `true` 或 `false`。

第二个参数表明：从index的位置开始

var str = "abcdefg";
    console.log(str.startsWith("abc")) //true
    console.log(str.startsWith("def",3)) //true

**`includes()` **方法用于判断一个字符串是否包含在另一个字符串，根据情况返回 true 或 false。

var str = "abcdefg";
    console.log(str.includes("ab")) //true

可以指定第二个参数，从字符串的第index位开始查找：

var str = "abcdefg";
    console.log(str.includes("ab",1)) //false

[20200821194548285.png]: /images/20221124/04c6b9171d14495e8fd666e926de5427.png
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators
[String]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/String
[localeCompare]: https://blog.csdn.net/zyz00000000/article/details/106924219
[search_split_replace_match]: https://blog.csdn.net/zyz00000000/article/details/107957777
[Object]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
[Object.toString]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
[String.prototype.valueOf]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf
[2020082119212180.png]: /images/20221124/7fda665ccd5447e98f51c8f651abf5a0.png