JavaScript 类型转换:数字转换和 Symbol 类型转换

数字转换

将数据类型转换为数字称为数字转换,可以使用Number()parseInt()parseFloat()等方法将数据类型显式转换为数字。当一个值不能被强制转换为一个数字时,就会返回 NaN

1. 字符串 => 数字:

当把字符串转换为数字时,JavaScript 引擎首先会修剪前导和后置空格、\n\t 字符,如果修剪后的字符串不代表有效数字,则返回 NaN。 如果字符串为空,则返回 0。

Number('123');            // 123
Number("-12.34")          // -12.34
Number("12s");            // NaN
Number("\n")              // 0parseInt(' 203px');       // 203 
parseInt('10.000')        // 10   
parseInt('10.20')         // 10 
parseFloat('203.212px');  // 203.212
parseFloat('10.20')       // 10.2
parseFloat('10.81')       // 10.81

fileOf7174.png

可以看到,parseInt 函数会从字符串中读取一个数字并删除它后面所有字符,但是如果数字前面有字符(空格除外),那么它将输出 NaN

2. 布尔值 => 数字:

当使用 Number() 将布尔值转化为数字时,true 会转化为 1,false 会转化为 0。

Number(true);  // 1
Number(false); // 0

3. null  => 数字:

当使用 Number() 将 null 转化为数字时,会返回 0:

Number(null); // 0
null + 5; // 5

4. undefined / 数组 / 对象 / NaN => 数字:

当使用 Number() 将 undefined、数组、对象、NaN 转化为数字时,会返回 NaN

Number(undefined);  // NaN
Number([1, 2, 3])   // NaN
Number({})          // NaN
Number(NaN)         // NaN

5. 数组元素

可以使用map遍历数组元素,并使用需要的类型来进行类型转换:

["1", "9", "-9", "0.003", "yes"].map(Number);
// 输出结果:[1, 9, -9, 0.003, NaN]

6. 特殊规则

在表达式中,当我们将 == 运算符应用于 null 或 undefined 时,不会发生数字转换。 此外,null 只等于 null 或 undefined,不能等于其他任何值:

null == null;           // true 
null == 0;              // false
null == undefined;      // true
undefined == undefined  // true

fileOf7174.png

根据运算符优先级,+ 运算符具有从左到右的关联性,因此如果有一个表达式 2 + 3 + '4' + 'number' ,则操作按以下方式完成:

2 + 3 + '4' + 'number'
==> 5 + '4' + 'number'
// 数字 5 被隐式转换为字符串,然后连接起来
==> '54' + 'number'
==> '54number'

NaN 不等于任何其他类型,甚至它本身:

NaN == NaN  // false

7. 总结

上面的例子中,可以清楚地看到一些意想不到的结果:将 null 转换为数字时返回了 0,而将 undefined 转换为数字返回了 NaN。两个操作都应该返回 NaN,因为这两种值类型显然都不是有效的数字,将空字符串转换为数字时也返回了 0。

下面是 ECMAScript 规范中将数据类型转换为字符串的规则,清楚的解释了上面的异常现象:

fileOf7174.png

另外,在 ECMAScript 规范中,还提到一点:

fileOf7174.png

意思就是:为空或仅包含空格的 StringNumericLiteral 将转换为 +0。这也就解释了为什么将空字符串转换为数字时也返回了 0。

ECMAScript 规范: https://262.ecma-international.org/5.1/#sec-9.3

Symbol 类型转换

1. 创建并使用 Symbol 类型

我们可以使用 Symbol 函数来创建 Symbol 类型的值:

const mySymbol = Symbol();
console.log(typeof mySymbol); // 输出: "symbol"

上述代码创建了一个名为 mySymbol 的 Symbol 类型的值,并将其打印出来。注意到 typeof 操作符返回的结果是 "symbol",这表示该值是 Symbol 类型。

Symbol 类型的值可用于作为对象的属性名,以确保属性的唯一性。例如:

const mySymbol = Symbol("mySymbol");
const obj = {[mySymbol]: "Hello Symbol",
};console.log(obj[mySymbol]); // 输出: "Hello Symbol"

在上述代码中,我们创建了一个带有描述符的 Symbol 值,并将其用作对象 obj 的属性名。通过使用方括号表示法,我们可以访问该属性并输出其值。

2. Symbol 转换为字符串、布尔值和数字

在 JavaScript 中,我们可以将 Symbol 类型的值转换为字符串、布尔值和数字类型。要将 Symbol 转换为字符串,可以使用 Symbol 值的 .toString() 方法或者调用 String() 函数。例如:

const mySymbol = Symbol("mySymbol");
console.log(mySymbol.toString()); // 输出: "Symbol(mySymbol)"
console.log(String(mySymbol)); // 输出: "Symbol(mySymbol)"

fileOf7174.png

在上述代码中,我们分别使用 .toString() 方法和 String() 函数将 Symbol 值转换为字符串。

然而,Symbol 类型的值不能直接与布尔值或数字进行转换,因为它们在不同的类型之间没有直接的关联。

3. 将其他类型转换为 Symbol

除了 Symbol 类型转换为其他类型,我们还可以将其他类型转换为 Symbol。为了将其他类型的值转换为 Symbol 类型,我们可以使用 Symbol() 函数并传递一个可选的描述符字符串作为参数:

const strSymbol = Symbol("string");
const boolSymbol = Symbol(Boolean(true));
const numSymbol = Symbol(Number(42));

在上述代码中,我们创建了三个不同的 Symbol 类型的值,并将分别将字符串、布尔值和数字类型的值转换为 Symbol 类型。

Symbol  只能进行显式转换,不能进行隐式转换。也就是说,Symbol不能被强制转换为字符串或数字,这样它们就不会被意外地用作本来应该表现为 Symbol 的属性。

const mySymbol = Symbol.for("mySymbol");
const str = String(mySymbol);console.log(str);  // 'Symbol(mySymbol)'

当使用 console.log() 来打印 symbol 时,它之所以有效,是因为 console.log() 在 symbol 上调用了 String() 方法以创建可用的结果。

如果尝试直接使用字符串连接 symbol,它将抛出TypeError

const mySymbol = Symbol.for("mySymbol");
const sum = mySymbol + "";
console.log(sum);   // Uncaught TypeError: Cannot convert a Symbol value to a string

将 mySymbol 连接到字符串需要首先将 mySymbol 转换为字符串,并且在检测到强制转换时会抛出错误,从而阻止以这种方式使用它。

同样,我们不能将 symbol 强制转换为数字,所有数学运算符在与符号一起使用时都会引发错误:

const mySymbol = Symbol.for("mySymbol");
const factor = mySymbol / 2;
console.log(factor);   // Uncaught TypeError: Cannot convert a Symbol value to a number

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/147712.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

2024年双十一有哪些值得入手的好物?2024年双十一必买物品推荐

2024年的双十一购物季将是一个精彩的时刻,各大电商平台将推出一系列精品数码产品,包括最新款的智能手机、笔记本电脑、平板电脑、智能手表等等。这些产品不仅拥有时尚的外观和高端的配置,而且还能够满足消费者多种多样的需求,比如…

windows11上超详细JDK17安装教程

1.下载安装包,访问官网地址​: https://www.oracle.com/java/technologies/downloads/#java172、选择jdk-17_windows-x64_bin.exe Installer。 3、接着等待下载,下载完成后双击进行安装 4、点击下一步 5、这里可以选择安装位置 6、等待安装 7、安…

24年最新Stable Diffusion之最全详解图解

前言 1. Stable Diffusion介绍 1.1 研究背景1.2 学术名词 2.Stable Diffusion原理解析 2.1 技术架构2.2 原理介绍 扩散过程 3.1 Diffusion前向过程3.2 Diffusion逆向(推断)过程 本次教程将使用AI绘画工具 Stable Diffusion 进行讲解,如还未…

超详细超实用!!!AI编程之cursor配置中文(一)

云风网 云风笔记 云风知识库 一、配置中文扩展 打开扩展,搜索chinese,安装chinese(simplified) 简体中文语言包,重启即可 二、配置中文方法二 使用快捷键组合【CtrlShiftp】,在搜索框中输入configure display language,选择中文也可配置中文 三、配置…

近几年来说最有效率的编程语言和市场最认可的编程语言分别是什么?

在过去的几年中,编程语言的效率和市场认可度在不断演变。不同的语言适用于不同的领域和场景,因而编程语言的“效率”和“市场认可”需要根据具体应用来分析。本文将从两个角度入手,分别探讨近几年中被认为最有效率和最受市场认可的编程语言。…

开源语音实时交互新突破:LLaMA-Omni实现大语言模型无缝语音交互

像 GPT-4o 这样的模型通过语音实现了与大型语言模型(LLMs)的实时交互,与基于文本的传统交互相比,显著提升了用户体验。然而,目前在如何构建基于开源 LLMs 的语音交互模型方面仍缺乏探索。为了解决这个问题,…

如何精准计算:大型语言模型(LLM)部署到底需要多少GPU内存?

在几乎所有关于大型语言模型(LLM)的访谈中,总有一个问题反复出现:“部署 LLM 需要多少 GPU 内存?” 这个问题并非偶然,它是衡量您对这些强大模型在实际生产环境中部署和扩展能力理解程度的关键指标。 当您…

Transformer推理结构简析(Decoder + MHA)

一、Transformer 基本结构 Transformer由encoder和decoder组成,其中: encoder主要负责理解(understanding) The encoder’s role is to generate a rich representation (embedding) of the input sequence, which the decoder c…

国内短剧cps系统和短剧(播放)系统的区别,附各源码部署教程

国内短剧项目主要分为两大形式:一种是做短剧播放平台,让用户付费观看;另一种是做短剧的分销,就是将他人的平台短剧推广,可做平台可入驻,拿分成。 首先来说一下短剧播放平台(短剧系统&#xff0…

828华为云征文|华为云服务器Flexus X 搭建BTC虚拟币质押投资理财系统(仅测试学习)

一、华为云服务器Flexus X 选购和介绍 强大性能,引领云服务新潮流 柔性算力,满足多样化需求 Flexus X实例的部署与管理过程也非常便捷。用户只需在华为云官网注册账号,选择适合的Flexus X实例规格,完成购买后即可开始部署。华为…

telnet ftp ssh 如何在交换设备上创建

telnet 测试 说明telnet 成功 这测试ftp 成功

深入理解MySQL InnoDB中的B+索引机制

目录 一、InnoDB中的B 树索引介绍 二、聚簇索引 (一)使用记录主键值的大小进行排序 页内记录排序 页之间的排序 目录项页的排序 (二)叶子节点存储完整的用户记录 数据即索引 自动创建 (三)聚簇索引…

【每日刷题】Day129

【每日刷题】Day129 🥕个人主页:开敲🍉 🔥所属专栏:每日刷题🍍 🌼文章目录🌼 1. 105. 从前序与中序遍历序列构造二叉树 - 力扣(LeetCode) 2. LCR 154. 复杂…

足球预测模型理论:足球数据分析——XGBoost算法实战

简介:本文将探讨如何使用XGBoost算法进行足球数据分析,特别是足球运动员身价估计。我们将通过实例和生动的语言,解释XGBoost算法的原理和实际应用,帮助读者理解复杂的技术概念,并提供可操作的建议和解决问题的方法。 足…

Eclipse离线安装Tomcat插件

Eclipse离线安装Tomcat插件 最近的自己在对低版本的代码的进行维护补丁,不得不采用Eclipse 来进行跑项目,真的是折磨 其中遇到一个问题就是打开Eclipse的2021版,安装Tomcat的插件,发现好家伙,就是死活在线安装失败 (喵的,真的是让我抓耳挠腮!!哈哈哈) 无奈,只好采用离线安装,特…

实时语音识别技术实现

实时语音识别 1.环境2.完整代码3.效果4.可能的问题 实时语音识别 1.环境 python版本:3.11.9 2.完整代码 import sqlite3 import timefrom funasr import AutoModel import sounddevice as sd import numpy as np# 模型参数设置 chunk_size [0, 10, 5] encoder_c…

60.【C语言】内存函数(memset,memcmp函数)

3.memset函数(常用) *简单使用 memset:memory set cplusplus的介绍 点我跳转 翻译: 函数 memset void * memset ( void * ptr, int value, size_t num ); 填充内存块 将ptr指向的内存块的前num个字节设置为指定值(解释为无符号char)。 (指针ptr类型为…

短剧APP分销小视频联盟收益源码带版权激励视频无需自己上传短剧

功能介绍: 带2000多部短剧资源,有版权,无需自己更新短剧, 已对接广告联盟,解锁短剧观看激励视频,对接各大广告平台 带刷小视频功能,插入视频广告,获取广告收益, 带任…

力扣206.反转链表

力扣《反转链表》系列文章目录 刷题次序,由易到难,一次刷通!!! 题目题解206. 反转链表反转链表的全部 题解192. 反转链表 II反转链表的指定段 题解224. 两两交换链表中的节点两个一组反转链表 题解325. K 个一组翻转…

【C++掌中宝】缺省参数的全面解析

文章目录 前言1. 什么是缺省参数?2. 缺省参数的分类2.1 全缺省【备胎是如何使用的😅】2.1.1 疑难细究 2.2 半缺省2.2.1 错误用法示范2.2.2 正确用法示范2.2.3🔥实参缺省与形参缺省的混合辨析🔥 3. 缺省参数的规则和限制4. 规定必须…