update: 字符串的常见方法
This commit is contained in:
qianguyihao
parent
673ac4ff04
commit
d44e76bd95
@ -1,14 +1,49 @@
|
||||
|
||||
|
||||
## 前言
|
||||
## 变量的数据类型
|
||||
|
||||
在上一篇文章中，我们介绍过，变量有以下数据类型：
|
||||
### 为什么需要数据类型
|
||||
|
||||
在计算机中，不同的数据所需占用的存储空间不同，为了充分利用存储空间，于是定义了不同的数据类型。而且，不同的数据类型，寓意也不同。
|
||||
|
||||
我们都知道，无论这个变量是字符串类型，还是数字类型，我们都可以直接用 `var` 去定义它。比如：
|
||||
|
||||
```javascript
|
||||
var a = 'hello word';
|
||||
|
||||
var b = 123;
|
||||
```
|
||||
|
||||
为什么可以这样做呢？这是因为：JavaScript 是一种「弱类型语言」，或者说是一种「动态语言」，这意味着不需要提前声明变量的类型，在程序运行过程中，类型会自动被确定。
|
||||
|
||||
**JS 的变量数据类型，是在程序运行的过程中，根据等号右边的值来确定的**。而且，变量的数据类型是可以变化的。比如说：
|
||||
|
||||
```javascript
|
||||
var name = 'qianguyihao';
|
||||
|
||||
name = 123; // 强制将变量 name 修改为 数字类型
|
||||
```
|
||||
|
||||
### JS中一共有六种数据类型
|
||||
|
||||
- **基本数据类型（值类型）**：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
|
||||
|
||||
- **引用数据类型（引用类型）**：Object 对象。
|
||||
|
||||
本文，我们针对这两种类型，做进一步介绍。我们先来看个例子。
|
||||
注意：内置对象 Function、Array、Date、RegExp、Error等都是属于 Object 类型。也就是说，除了那五种基本数据类型之外，其他的，都称之为 Object类型。
|
||||
|
||||
> 面试问：引用数据类型有几种？
|
||||
|
||||
> 面试答：只有一种，即 Object 类型。
|
||||
|
||||
**数据类型之间最大的区别**：
|
||||
|
||||
- 基本数据类型：参数赋值的时候，传数值。
|
||||
|
||||
- 引用数据类型：参数赋值的时候，传地址（修改的同一片内存空间）。
|
||||
|
||||
|
||||
## 一个经典的例子
|
||||
|
||||
**基本数据类型举例**：
|
||||
|
||||
@ -63,7 +98,7 @@
|
||||
**引用数据类型**：
|
||||
|
||||
|
||||
对象是保存到**堆内存**中的。每创建一个新的对象，就会在堆内存中开辟出一个新的空间，而**变量保存了对象的内存地址**（对象的引用）。如果两个变量保存了同一个对象的引用，当一个通过一个变量修改属性时，另一个也会受到影响。
|
||||
对象是保存到**堆内存**中的。每创建一个新的对象，就会在堆内存中开辟出一个新的空间；而**变量保存了对象的内存地址**（对象的引用），保存在栈内存当中。如果两个变量保存了同一个对象的引用，当一个通过一个变量修改属性时，另一个也会受到影响。
|
||||
|
||||
|
||||
|
||||
@ -1,45 +1,6 @@
|
||||
|
||||
## 变量的数据类型
|
||||
|
||||
### 为什么需要数据类型
|
||||
|
||||
在计算机中，不同的数据所需占用的存储空间不同，为了充分利用存储空间，于是定义了不同的数据类型。而且，不同的数据类型，寓意也不同。
|
||||
|
||||
我们都知道，无论这个变量是字符串类型，还是数字类型，我们都可以直接用 `var` 去定义它。比如：
|
||||
|
||||
```javascript
|
||||
var a = 'hello word';
|
||||
|
||||
var b = 123;
|
||||
```
|
||||
|
||||
为什么可以这样做呢？这是因为：JavaScript 是一种「弱类型语言」，或者说是一种「动态语言」，这意味着不需要提前声明变量的类型，在程序运行过程中，类型会自动被确定。
|
||||
|
||||
**JS 的变量数据类型，是在程序运行的过程中，根据等号右边的值来确定的**。而且，变量的数据类型是可以变化的。比如说：
|
||||
|
||||
```javascript
|
||||
var name = 'qianguyihao';
|
||||
|
||||
name = 123; // 强制将变量 name 修改为 数字类型
|
||||
```
|
||||
|
||||
### JS中一共有六种数据类型
|
||||
|
||||
- **基本数据类型（值类型）**：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
|
||||
|
||||
- **引用数据类型（引用类型）**：Object 对象。
|
||||
|
||||
注意：内置对象 Function、Array、Date、RegExp、Error等都是属于 Object 类型。也就是说，除了那五种基本数据类型之外，其他的，都称之为 Object类型。
|
||||
|
||||
> 面试问：引用数据类型有几种？
|
||||
|
||||
> 面试答：只有一种，即 Object 类型。
|
||||
|
||||
**数据类型之间最大的区别**：
|
||||
|
||||
- 基本数据类型：参数赋值的时候，传数值。
|
||||
|
||||
- 引用数据类型：参数赋值的时候，传地址（修改的同一片内存空间）。
|
||||
|
||||
今天这篇文章，我们详细讲一下基本数据类型。
|
||||
|
||||
@ -378,6 +339,17 @@ boolean
|
||||
|
||||
- 使用 typeof 检查一个null值时，会返回object。
|
||||
|
||||
|
||||
如果你想定义一个变量，以后打算存储为对象，但是还没想好放什么内容，这个时候，可以给 null。
|
||||
|
||||
比如：
|
||||
|
||||
```js
|
||||
var myObj = null;
|
||||
cosole.log(typeof myObj); // 打印结果：object
|
||||
```
|
||||
|
||||
|
||||
### `undefined`：未定义
|
||||
|
||||
**声明**了一个变量，但是没有**赋值**（例如：`var a;`），此时它的值就是 `undefined`。
|
||||
@ -410,7 +382,7 @@ a = b;
|
||||
|
||||
举例1：
|
||||
|
||||
```
|
||||
```js
|
||||
//a b c
|
||||
var a = 1; //1
|
||||
var b = 2; //1 2
|
||||
@ -433,7 +405,7 @@ console.log(c);
|
||||
|
||||
举例2：
|
||||
|
||||
```
|
||||
```js
|
||||
//a b c
|
||||
var a = 1;
|
||||
var b = 2;
|
||||
@ -456,7 +428,7 @@ console.log(c); //8
|
||||
|
||||
举例3：
|
||||
|
||||
```
|
||||
```js
|
||||
//a b
|
||||
var a = "1";
|
||||
var b = 2; //"1" 2
|
||||
@ -475,7 +447,7 @@ console.log(b); //输出212
|
||||
|
||||
举例4：
|
||||
|
||||
```
|
||||
```js
|
||||
//a b
|
||||
var a = "1";
|
||||
var b = 2;
|
||||
@ -495,7 +467,7 @@ console.log(b) //221
|
||||
|
||||
举例5：（这个例子比较特殊，字符串减去数字）
|
||||
|
||||
```
|
||||
```js
|
||||
var a = "3";
|
||||
var b = 2;
|
||||
console.log(a-b);
|
||||
@ -141,11 +141,12 @@ var obj3 = Object.assign({}, obj);
|
||||
|
||||
## 对象的分类
|
||||
|
||||
|
||||
1.内置对象：
|
||||
|
||||
- 由ES标准中定义的对象，在任何的ES的实现中都可以使用
|
||||
|
||||
- 比如：Math、String、Number、Boolean、Function、Object....
|
||||
- 比如：Object、Math、Date、String、Array、Number、Boolean、Function等。
|
||||
|
||||
2.宿主对象：
|
||||
|
||||
@ -158,6 +159,10 @@ var obj3 = Object.assign({}, obj);
|
||||
- 由开发人员自己创建的对象
|
||||
|
||||
|
||||
通过 new 关键字创建出来的对象实例，都是属于对象类型，比如Object、Array、Date等。
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
@ -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 @@
|
||||
|
||||
|
||||
|
||||
|
||||
## 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 @@
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
## 大小写转换
|
||||
|
||||
举例：
|
||||
|
||||
@ -1078,7 +1078,7 @@ array = Array.from(arrayLike)
|
||||
//如果相等则证明出现了重复的元素，则删除j对应的元素
|
||||
arr.splice(j, 1);
|
||||
//当删除了当前j所在的元素以后，后边的元素会自动补位
|
||||
//此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素
|
||||
//此时将不会在比较这个元素，我需要再比较一次j所在位置的元素
|
||||
//使j自减
|
||||
j--;
|
||||
}
|
||||
|
||||
@ -152,7 +152,7 @@
|
||||
|
||||
我们平时使用的对象不一定是自己创建的，可能是别人提供的，这个时候，in 运算符可以派上用场。
|
||||
|
||||
## 遍历对象中的属性：for ... in
|
||||
## 遍历对象：for ... in
|
||||
|
||||
语法：
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user