现代 JavaScript 原始数据类型转换你学会了吗?

简介: 现代 JavaScript 原始数据类型转换你学会了吗?

640.png

类型转换


大多数情况下,运算符和函数会自动将赋予他们的值转换为正确的类型。

比如,alert 会自动将任何值都转换为字符串以进行显示。算术运算符会将值转换为数字。

在某些情况下,我们需要将值显式地转换为我们期望的类型。


对象还未纳入讨论中本章不会讨论 object 类型。先学习原始类型,之后我们会学习 object 类型。我们会在 info:object-toprimitive 一节中学习对象的类型转换。


字符串转换


当我们需要一个字符串形式的值时,就会进行字符串转换。

比如,alert(value)value 转换为字符串类型,然后显示这个值。

我们也可以显式地调用 String(value) 来将 value 转换为字符串类型:

let value = true;

alert(typeof value); // boolean


value = String(value); // 现在,值是一个字符串形式的 "true"

alert(typeof value); // string

字符串转换最明显。false 变成 "false"null 变成 "null" 等。


数字型转换


在算术函数和表达式中,会自动进行 number 类型转换。

比如,当把除法 / 用于非 number 类型:

alert( "6" / "2" ); // 3, string 类型的值被自动转换成 number 类型后进行计算

我们也可以使用 Number(value) 显式地将这个 value 转换为 number 类型。

let str = "123";

alert(typeof str); // string


let num = Number(str); // 变成 number 类型 123


alert(typeof num); // number

当我们从 string 类型源(如文本表单)中读取一个值,但期望输入一个数字时,通常需要进行显式转换。

如果该字符串不是一个有效的数字,转换的结果会是 NaN。例如:

let age = Number("an arbitrary string instead of a number");


alert(age); // NaN,转换失败

number 类型转换规则:


变成……
undefined NaN
null 0
true 和 false 1 和 0
string 去掉首尾空格后的纯数字字符串中含有的数字。如果剩余字符串为空,则转换结果为 0。否则,将会从剩余字符串中“读取”数字。当类型转换出现 error 时返回 NaN
译注:字符串转换为 number 类型时,除了 undefinednullboolean 三种特殊情况,只有字符串是由空格和数字组成时,才能转换成功,否则会出现 error 返回 NaN


例子:


alert( Number("   123   ") ); // 123

alert( Number("123z") );      // NaN(从字符串“读取”数字,读到 "z" 时出现错误)

alert( Number(true) );        // 1

alert( Number(false) );       // 0


请注意 nullundefined 在这有点不同:null 变成数字 0undefined 变成 NaN


加号 '+' 连接字符串

几乎所有的算术运算符都将值转换为数字进行运算,加号 + 是个例外。如果其中一个运算元是字符串,则另一个也会被转换为字符串。然后,将两者连接在一起:


alert( 1 + '2' ); // '12' (字符串在加号右边)

alert( '1' + 2 ); // '12' (字符串在加号左边)


这仅仅发生在至少其中一方为字符串的情况下。否则值会被转换为数字。


布尔型转换


布尔(boolean)类型转换是最简单的一个。

它发生在逻辑运算中(稍后我们将进行条件判断和其他类似的东西),但是也可以通过调用 Boolean(value) 显式地进行转换。

转换规则如下:

  • 直观上为“空”的值(如 0、空字符串、nullundefinedNaN)将变为 false
  • 其他值变成 true


比如:


alert( Boolean(1) ); // true
alert( Boolean(0) ); // false
alert( Boolean("hello") ); // true
alert( Boolean("") ); // false


请注意:包含 0 的字符串 "0" 是 true

一些编程语言(比如 PHP)视 "0"false。但在 JavaScript 中,非空的字符串总是 true
alert( Boolean("0") ); // true
alert( Boolean(" ") ); // 空白, 也是 true (任何非空字符串是 true)

总结


有三种常用的类型转换:转换为 string 类型、转换为 number 类型和转换为 boolean 类型。

字符串转换 —— 转换发生在输出内容的时候,也可以通过 String(value) 进行显式转换。原始类型值的 string 类型转换通常是很明显的。

数字型转换 —— 转换发生在进行算术操作时,也可以通过 Number(value) 进行显式转换。

数字型转换遵循以下规则:


变成……
undefined NaN
null 0
true / false 1 / 0
string “按原样读取”字符串,两端的空白会被忽略。空字符串变成 0。转换出错则输出 NaN


布尔型转换 —— 转换发生在进行逻辑操作时,也可以通过 Boolean(value) 进行显式转换。

布尔型转换遵循以下规则:


变成……
0, null, undefined, NaN, "" false
其他值 true


上述的大多数规则都容易理解和记忆。人们通常会犯错误的值得注意的例子有以下几个:


  • undefined 进行数字型转换时,输出结果为 NaN,而非 0
  • "0" 和只有空格的字符串(比如:" ")进行布尔型转换时,输出结果为 true

我们在本小结没有讲 object 类型的转换。在我们学习完更多关于 JavaScript 的基本知识后,我们会在专门介绍 object 的章节 对象原始值转换 中详细讲解 object 类型转换。


作业题


先自己做题目再看答案。


类型转换


重要程度:⭐️⭐️⭐️⭐️⭐️

下面这些表达式的结果是什么?

"" + 1 + 0
"" - 1 + 0
true + false
6 / "3"
"2" * "3"
4 + 5 + "px"
"$" + 4 + 5
"4" - 2
"4px" - 2
7 / 0
"  -9  " + 5
"  -9  " - 5
null + 1
undefined + 1
" \t \n" - 2

好好思考一下,把它们写下来然后和答案比较一下。


答案


"" + 1 + 0 = "10"// (1)
"" - 1 + 0 = -1// (2)
true + false = 1
6 / "3" = 2
"2" * "3" = 6
4 + 5 + "px" = "9px"
"$" + 4 + 5 = "$45"
"4" - 2 = 2
"4px" - 2 = NaN
7 / 0 = Infinity
" -9  " + 5 = " -9  5"// (3)
" -9  " - 5 = -14// (4)
null + 1 = 1// (5)
undefined + 1 = NaN// (6)
" \t \n" - 2 = -2// (7)


  1. 有字符串的加法 "" + 1,首先会将数字 1 转换为一个字符串:"" + 1 = "1",然后我们得到 "1" + 0,再次应用同样的规则得到最终的结果。
  2. 减法 -(就像大多数数学操作那样)只能用于数字,它会使空字符串 "" 转换为 0
  3. 带字符串的加法会将数字 5 加到字符串之后。
  4. 减法始终将字符串转换为数字,因此它会使 " -9 " 转换为数字 -9(忽略了字符串首尾的空格)。
  5. null 经过数字转换之后会变为 0
  6. undefined 经过数字转换之后会变为 NaN
  7. 字符串转换为数字时,会忽略字符串的开头和结尾处的空格字符。在这里,整个字符串由空格字符组成,包括 \t\n 以及它们之间的“常规”空格。因此,类似于空字符串,所以会变为 0
目录
相关文章
|
5月前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
160 59
|
2月前
|
存储 JavaScript 前端开发
JavaScript中的数据类型以及存储上的差别
通过本文的介绍,希望您能够深入理解JavaScript中的数据类型及其存储差别,并在实际编程中灵活运用这些知识,以提高代码的性能和稳定性。
63 3
|
3月前
|
存储 JavaScript 前端开发
js中的数据类型
JavaScript 中的数据类型包括五种基本类型(String、Number、Undefined、Boolean、Null)和三种引用类型(Object、Array、Function,以及ES6新增的Symbol)。基本类型直接存储值,引用类型存储的是指向实际数据的内存地址。了解它们的区别对于掌握 JavaScript 的变量赋值和函数传参至关重要。
52 1
|
4月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
178 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
4月前
|
JavaScript 前端开发 开发者
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
50 1
|
5月前
|
JavaScript 前端开发
JavaScript基础知识-基本数据类型和引用数据类型
关于JavaScript基础知识的文章,主要介绍了基本数据类型和引用数据类型。
55 2
JavaScript基础知识-基本数据类型和引用数据类型
|
5月前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
122 2
|
4月前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
91 0
|
6月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
6月前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略:从批量操作到定制Inspector界面,手把手教你编写高效开发工具,解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎,支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具,开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能,包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具,并提供具体示例代码。理解并应用这些技巧,可大幅优化开发流程,提高生产力。
549 1

热门文章

最新文章