JavaScript 中的类型转换

2025 年 3 月 3 日 | 阅读 8 分钟

在 JavaScript 中，类型转换是将一种数据类型的值转换为另一种数据类型值的过程。

例如，将数字数据类型转换为字符串。

什么是数据类型？

它是变量可以保存的数据类型。JavaScript 中有八种主要的数据类型，如下所示：

数字

它可以是任何数字的数据类型。

语法

String

它可以保存任何类型文本的数据类型。文本应写在引号内，可以是单引号或双引号。

语法

 
let str = "Welcome"; //text in double quotes
let str = 'Welcome'; //text in single quotes   

Boolean

它只有两个值的布尔数据类型，即 true 或 false。它用于创建只有是或否两种可能性的功能。

语法

 
if(going to the market === true)
console.log("shopping");
if(going to the market === false)
console.log("reading books");   

Null

它本身就是一个值。它用于我们希望返回无值的地方。

语法

 
if(gift) {
	return "ipod";
}
if(prank) {
	return null;
}   

Bigint

它是用于保存大数的数字数据类型。

语法

未定义

它本身就是一个值，就像 null 一样。它不能被更改，当一个变量被声明但未赋值时出现。

语法

 
let container;
console.log(container); //undefined
container = "pear";
console.log(container); //pear   

符号

它是一种基本数据类型，表示一个唯一的标识符。它用作对象属性的键。

语法

Object

它是一种非基本或引用数据类型，它定义了对象的不同属性，如形状、颜色等。

语法

现在，让我们来理解类型转换。

类型转换有两种，如下所示：

隐式类型转换
显式类型转换

让我们逐一了解。

隐式类型转换

当存在类型转换的内部需求时，它由编译器或解释器自动完成。

让我们通过示例来理解它。

当字符串与其他数据类型相加时发生隐式类型转换

如果我们向字符串添加任何数据类型，它将自动转换为字符串，这意味着如果我们向字符串添加任何数字，它将被转换为字符串。如果我们向字符串添加布尔值，它也将被转换为字符串。

代码

 
let code1 = "Hello" + "there"; //string + string
console.log(code1);
let code2 = "Hello" + 10; //string + number
console.log(code2);
let code3 = "Hello" + false; //string + Boolean
console.log(code3);
let code4 = "Hello" + null; //string + null
console.log(code4);
let code5 = "Hello" + undefined; //string + undefined
console.log(code5);   

输出

 
Hellothere
Hello10
Hellofalse
Hellonull
Helloundefined

数字字符串到数字的隐式类型转换

当我们把一个数字值放在字符串中，并执行乘法、减法或除法等数学运算与另一个数字值时，数字字符串将被转换为数字。

注意：这不适用于加法（加号）。

当一个值是数字字符串而另一个值是数字时，它将被转换为数字数据类型。

代码

 
let code1 = "5" * 5; 
console.log(code1);
let code2 = "5" - 5; 
console.log(code2);
let code3 = "5" / 5; 
console.log(code3);   

输出

当一个值是数字字符串而另一个值也是数字字符串时，它也将被转换为数字数据类型。

代码

 
let code1 = "10" * "10"; 
console.log(code1);
let code2 = "5" - "10"; 
console.log(code2);
let code3 = "5" / "10"; 
console.log(code3);   

输出

布尔值到数字的隐式类型转换

当一个值是数字而另一个值是布尔值时。

代码

 
let code1 = 2 + true; 
console.log(code1);
let code2 = 2 + false; 
console.log(code2);   

输出

3
2

当一个值是数字字符串而另一个值是布尔值时，它们的组合将变成字符串。

代码

 
let code1 = "2" + true; 
console.log(code1);
let code2 = "2" + false; 
console.log(code2);   

输出

 
2true
2false

对布尔值进行算术运算时。

数字值 - 布尔值

代码

 
let code1 = 10 - true; 
console.log(code1);
let code2 = 10 - false; 
console.log(code2);   

输出

 
9
10

数字字符串 - 布尔值

 
let code1 = "10" - true; 
console.log(code1);
let code2 = "10" - false; 
console.log(code2);   

输出

 
9
10

数字 / 布尔值

 
let code1 = 10 / true; 
console.log(code1);
let code2 = 10 / false; 
console.log(code2);   

输出

 
10
Infinity

数字字符串 / 布尔值

 
let code1 = "10" / true; 
console.log(code1);
let code2 = "10" / false; 
console.log(code2);   

输出

 
10
Infinity

数字 * 布尔值

 
let code1 = 10 * true; 
console.log(code1);
let code2 = 10 * false; 
console.log(code2);   

输出

 
10
0

数字字符串 * 布尔值

 
let code1 = "10" * true; 
console.log(code1);
let code2 = "10" * false; 
console.log(code2);   

输出

 
10
0

null 到数字的隐式类型转换

对数字与 null 值进行算术运算。当 null 与数字一起使用时，null 就充当 0。

代码

 
const code1 = 2 + null; 
console.log(code1);
const code2 = 2 - null; 
console.log(code2);
const code3 = 2 * null; 
console.log(code3);
const code4 = 2 / null; 
console.log(code4);   

输出

 
2
2
0
Infinity

undefined 的隐式类型转换

数字与 undefined

对数字与 undefined 值进行算术运算。

代码

 
const code1 = 2 + undefined; 
console.log(code1);
const code2 = 2 - undefined; 
console.log(code2);
const code3 = 2 * undefined; 
console.log(code3);
const code4 = 2 / undefined; 
console.log(code4);   

输出

 
NaN
NaN
NaN
NaN

null 与 undefined

对 undefined 值与 null 进行算术运算。

代码

 
const code1 = null + undefined; 
console.log(code1);
const code2 = null - undefined; 
console.log(code2);
const code3 = null * undefined; 
console.log(code3);
const code4 = null / undefined; 
console.log(code4);   

输出

 
NaN
NaN
NaN
NaN

布尔值与 undefined

对 undefined 值与布尔值进行算术运算。

代码

 
const code1 = true + undefined; 
console.log(code1);
const code2 = false - undefined; 
console.log(code2);
const code3 = true * undefined; 
console.log(code3);
const code4 = false / undefined; 
console.log(code4);   

输出

 
NaN
NaN
NaN
NaN

显式类型转换

当存在类型转换的外部需求时，它需要手动完成。显式类型转换可以通过使用内置方法来完成。

显式转换为数字

我们可以使用 Number() 方法将任何内容转换为数字。

数字字符串转换为数字

代码

 
const code1 = Number("6"); 
console.log(code1);   

输出

字符串转换为数字

 
const code1 = Number("Hello"); 
console.log(code1);   

输出

NaN

布尔值转换为数字

 
const code1 = Number(true); 
console.log(code1);
const code2 = Number(false); 
console.log(code2);   

输出

1
0

Null 转换为数字

 
const code1 = Number(null); 
console.log(code1);   

输出

Undefined 转换为数字

 
const code1 = Number(undefined); 
console.log(code1);   

输出

NaN

空字符串转换为数字

 
const code1 = Number(' '); 
console.log(code1);   

输出

显式转换为字符串

我们可以利用 String() 或 toString() 方法将任何内容转换为字符串。

Null 转换为字符串

 
const code2 = String(null); 
console.log(code2);
const code1 = (null).toString(); 
console.log(code1);   

输出

 
null
TypeError

数字转换为字符串

 
const code1 = (5).toString(); 
console.log(code1);
const code2 = String(5); 
console.log(code2);   

输出

5
5

Undefined 转换为字符串

 
const code1 = String(undefined); 
console.log(code1);
const code2 = (undefined).toString(); 
console.log(code2);   

输出

 
undefined
TypeError

NaN 转换为字符串

 
const code1 = String(NaN); 
console.log(code1);
const code2 = (NaN).toString(); 
console.log(code2);

输出

 
NaN
NaN

布尔值转换为字符串

 
const code1 = String(true); 
console.log(code1);
const code2 = (false).toString(); 
console.log(code2);
const code3 = String(false); 
console.log(code3);
const code4 = (true).toString(); 
console.log(code4);   

输出

 
true 
false
false
true

显式转换为布尔值

我们可以利用 Boolean() 方法将任何类型转换为布尔值。

显式转换为 false

 
const code1 = Boolean(undefined); 
console.log(code1);
const code2 = Boolean(null); 
console.log(code2);
const code3 = Boolean(0); 
console.log(code3);
const code4 = Boolean(NaN); 
console.log(code4);
const code5 = Boolean(""); 
console.log(code5);   

输出

 
false
false
false
false
false

显式转换为 true

 
const code1 = Boolean("Hello"); 
console.log(code1);
const code2 = Boolean(" "); 
console.log(code2);
const code3 = Boolean(1); 
console.log(code3);   

输出

 
true
true
true

显式将数组转换为对象

我们可以借助各种方法将数组转换为对象。

使用展开运算符

我们可以使用展开运算符并将其数组转换为对象。

代码

 
let myArray = ["HTML", "JS", "CSS", "Java", "Python", "SQL"];
let myObject = {...myArray};
console.log(myObject);   

输出

 
{
  '0': 'HTML',
  '1': 'JS',
  '2': 'CSS',
  '3': 'Java',
  '4': 'Python',
  '5': 'SQL'
}

使用 for 循环

我们可以使用 for 循环将数组转换为对象。

代码

 
let myArray = ["HTML", "JS", "CSS", "Java", "Python", "SQL"];
let myObject = { };
let arrToObj = (arr) => {
	for ( let i = 0; i < arr.length; i++) {
	myObject[i] = arr[i];
}
return myObject;
}
console.log(arrToObj(myArray));   

输出

 
{
  '0': 'HTML',
  '1': 'JS',
  '2': 'CSS',
  '3': 'Java',
  '4': 'Python',
  '5': 'SQL'
}

使用 forEach 循环

我们可以使用 forEach 循环将数组转换为对象。

代码

 
let myArray = ["Book1", "Book2", "Book3", "Book3", "Book4", "Book5"];
let myObject = { };
myArray.forEach((item, index) => {
	myObject[index] = item;
})
console.log(myObject);   

输出

 
{
  '0': 'Book1',
  '1': 'Book2',
  '2': 'Book3',
  '3': 'Book3',
  '4': 'Book4',
  '5': 'Book5'
}

使用 Object.assign()

我们可以使用 Object.assign() 方法将数组转换为对象。

代码

 
let myArray = ["Book1", "Book2", "Book3", "Book4", "Book5", "Book6"];
let myObject = Object.assign({ }, myArray);
console.log(myObject);   

输出

 
{
  '0': 'Book1',
  '1': 'Book2',
  '2': 'Book3',
  '3': 'Book4',
  '4': 'Book5',
  '5': 'Book6'
}

使用 Object.fromEntries()

我们可以使用 Object.fromEntries() 方法将数组转换为对象。

代码

 
let myArray = [[0, "cartoon1"], [1, "cartoon2"], [3, "cartoon3"], [4, "cartoon4"]];
let myObject = Object.fromEntries(myArray);
console.log(myObject);   

输出

 
{ '0': 'cartoon1', '1': 'cartoon2', '3': 'cartoon3', '4': 'cartoon4' }

显式将对象转换为数组

我们可以借助内置方法将对象转换为数组。

使用 Object.entries()

我们可以使用 Object.assign() 方法将数组转换为对象。

代码

 
let myObject = {
0: "BMW",
1: "Audi",
2: "Ford",
3: "Honda"
}
let myArray = Object.entries(myObject);
console.log(myArray);   

输出

 
[ [ '0', 'BMW' ], [ '1', 'Audi' ], [ '2', 'Ford' ], [ '3', 'Honda' ] ]

使用 Object.values()

我们可以使用 Object.values() 方法将数组转换为对象。

代码

 
let myObject = {
0: "BMW",
1: "Audi",
2: "Ford",
3: "Honda"
}
let myArray = Object.values(myObject);
console.log(myArray);  

输出

 
[ 'BMW', 'Audi', 'Ford', 'Honda' ]

结论

我们在本文中了解了 JavaScript 中的类型转换。以下是需要记住的要点：

JavaScript 中有八种主要的数据类型：Number、String、Boolean、Null、Bigint、Undefined、Symbol 和 Object。
类型转换有两种：隐式和显式。
隐式类型转换是指由编译器或解释器自动将一种数据类型转换为另一种数据类型。
显式类型转换是指使用内置方法手动将一种数据类型转换为另一种数据类型。

下一主题JavaScript 中的 Onkeypress 事件

JavaScript 中的类型转换

什么是数据类型？

数字

String

Boolean

Null

Bigint

未定义

符号

Object

隐式类型转换

当字符串与其他数据类型相加时发生隐式类型转换

数字字符串到数字的隐式类型转换

注意：这不适用于加法（加号）。

布尔值到数字的隐式类型转换

null 到数字的隐式类型转换

undefined 的隐式类型转换

显式类型转换

显式转换为数字

显式转换为字符串

显式转换为布尔值

显式将数组转换为对象

显式将对象转换为数组

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 中的类型转换

什么是数据类型？

数字

String

Boolean

Null

Bigint

未定义

符号

Object

隐式类型转换

当字符串与其他数据类型相加时发生隐式类型转换

数字字符串到数字的隐式类型转换

注意：这不适用于加法（加号）。

布尔值到数字的隐式类型转换

null 到数字的隐式类型转换

undefined 的隐式类型转换

显式类型转换

显式转换为数字