webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: 字符串的常见方法

Browse Source
This commit is contained in:
qianguyihao
2020-05-15 20:05:56 +08:00
parent 673ac4ff04
commit d44e76bd95
6 changed files with 164 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
04-JavaScript基础/13-内置对象 String：字符串的常见方法.md
View File

@@ -7,11 +7,12 @@
字符串的常见方法如下。
## indexOf()/lastIndexOf()
## indexOf()/lastIndexOf()：获取指定字符的索引
> 这个方法，是使用频率最高的一个方法。
`indexOf()/lastIndexOf()`：获取指定字符的索引。
### 语法
**语法1**：
@@ -69,9 +70,38 @@
上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。
## charAt()
### 举例
**案例**：查找字符串"qianguyihao"中，所有 `a` 出现的位置以及次数。
思路：
（1）先查找第一个 a 出现的位置。
（2）只要indexOf 返回的结果不是 -1 就继续往后查找。
（3）因为indexOf 只能查找到第一个，所以后面的查找，可以利用第二个参数，在当前索引加1，从而继续查找。
代码实现：
```js
var str = 'qianguyihao';
var index = str.indexOf('a');
var num = 0;
while (index !== -1) {
console.log(index);
num++; // 每打印一次，就计数一次
index = str.indexOf('o', index + 1);
}
console.log('a 出现的次数是: ' + num);
```
## 获取指定位置的字符
### 1、charAt(index)
`charAt`：返回字符串指定位置的字符。不会修改原字符串。
语法：
@@ -79,9 +109,10 @@
字符 = str.charAt(index);
```
解释：字符串中第一个字符的下标是 0。如果参数 index 不在 [0, string.length) 之间，该方法将返回一个空字符串。
解释：返回字符串指定位置的字符。这里的 `str.charAt(index)`和`str[index]`的效果是一样的。
注意：字符串中第一个字符的下标是 0。如果参数 index 不在 [0, string.length) 之间，该方法将返回一个空字符串。
而且，这里的 `str.charAt(index)`和`str[index]`的效果是一样的。
**代码举例**：
@@ -99,9 +130,11 @@
上面这个例子一般不用。一般打印数组和json的时候用索引，打印String不建议用索引。
## charCodeAt()
### 2、str[index]
`charCodeAt`：返回字符串指定位置的字符的 Unicode 编码。不会修改原字符串。
`str.charAt(index)`和`str[index]`的效果是一样的，不再赘述。区别在于：`str[index]`是H5标准里新增的特性。
### 3、charCodeAt(index)
语法：
@@ -109,7 +142,12 @@
字符 = str.charCodeAt(index);
```
**代码举例**：打印字符串的占位长度
解释：返回字符串指定位置的字符的 Unicode 编码。不会修改原字符串。
在实际应用中，通过这个方法，我们可以判断用户按下了哪个按键。
**代码举例**：打印字符串的**占位长度**。
提示：一个英文占一个位置，一个中文占两个位置。
@@ -173,14 +211,15 @@
## concat()
`concat()`：字符串的连接。
语法：
```javascript
新字符串 = str1.concat(str2)； //链接两个字符串
新字符串 = str1.concat(str2)； //连接两个字符串
```
解释：字符串的连接。
这种方法基本不用，直接把两个字符串相加就好。
是的，你会发现，数组中也有`concat()`方法，用于数组的连接。这个方法在数组中用得挺多的。
@@ -197,75 +236,79 @@
## slice()
`slice()`：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
语法：
```javascript
字符串 = str.slice(开始索引, 结束索引); //两个参数都是索引值。包左不包右。
```
解释：上面的参数，包左不包右。参数举例如下：
解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
- (2, 5) 截取时，包左不包右。
- (2) 表示**从指定的索引位置开始，截取到最后**。
注意：上面的参数，包左不包右。参数举例如下：
- (-3) 表示从倒数第几个开始，截取到最后。
- `(2, 5)` 截取时，包左不包右。
- (1, -1) 表示从第一个截取到倒数第一个。
- `(2)` 表示**从指定的索引位置开始，截取到最后**。
- (5, 2) 表示前面的大，后面的小，返回值为空。
- `(-3)` 表示从倒数第三个开始，截取到最后。
- `(1, -1)` 表示从第一个截取到倒数第一个。
- `(5, 2)` 表示前面的大，后面的小，返回值为空。
## substring()
`substring()`：从字符串中截取指定的内容。和`slice()`类似。
语法：
```javascript
字符串 = str.substring(开始索引, 结束索引); //两个参数都是索引值。包左不包右。
```
解释：从字符串中截取指定的内容。和`slice()`类似。
`substring()`和`slice()`是类似的。但不同之处在于：
- `substring()`不能接受负值作为参数。如果传递了一个**负值**，则默认使用0。
- `substring()`还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。比如说， `substring(1, 0)`截取的是第一个字符。
- `substring()`还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。比如说， `substring(1, 0)`相当于截取的是第一个字符。
## substr()
`substr()`：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
语法：
```javascript
字符串 = str.substr(开始索引, 截取的长度);
```
解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
注意，这个方法的第二个参数**截图的长度**，不是结束索引。
参数举例：
- (2,4)：从索引值为2的字符开始，截取4个字符。
- `(2,4)` 从索引值为2的字符开始，截取4个字符。
- (1)：从指定位置开始，截取到最后。
- `(1)` 从指定位置开始，截取到最后。
- (-3)：从倒数第几个开始，剪到最后.
- `(-3)` 从倒数第几个开始，截取到最后.
- 不包括前大后小的情况。
备注：ECMAscript 没有对 `substr()` 方法进行标准化，因此不建议使用它。
## split() 【重要】
## split()：字符串转换为数组 【重要】
`split()`：将一个字符串拆分成一个数组。
语法：
```javascript
数组 = str.split();
新的数组 = str.split(分隔符);
```
解释：将一个字符串拆分成一个数组。不会改变原字符串。
备注：`split()`这个方法在实际开发中用得非常多。一般来说，从接口拿到的json数据中，经常会收到类似于`"q, i, a, n"`这样的字符串，前端需要将这个字符串拆分成`['q', 'i', 'a', 'n']`数组，这个时候`split()`方法就排上用场了。
@@ -300,6 +343,32 @@
![](http://img.smyhvae.com/20180202_1503.png)
## replace()
语法：
```javascript
新的字符串 = str.replace(被替换的字符，新的字符);
```
解释：将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。
注意：这个方法，只会替换第一个字符。
代码举例：
```javascript
//replace()方法：替换
var str2 = "Today is fine day,today is fine day !!!"
console.log(str2);
console.log(str2.replace("today","tomorrow")); //只能替换第一个today
console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，才能替换所有的today
```
## trim()
`trim()`：去除字符串前后的空白。
@@ -317,26 +386,6 @@
![](http://img.smyhvae.com/20180202_1455.png)
## replace()
`replace()`：将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。
语法：
```javascript
新的字符串 = str.replace(被替换的内容，新的内容);
```
代码举例：
```javascript
//replace()方法：替换
var str2 = "Today is fine day,today is fine day !!!"
console.log(str2);
console.log(str2.replace("today","tomorrow")); //只能替换第一个today
console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，才能替换所有的today
```
## 大小写转换
举例：