学习下JS里如何实现类型转换:隐性转换和显性转换 - Web前端
作者:98wpeu发布时间:2026-09-16分类:网页前端技术浏览:7

2.10号,大家都开工了吗?目前估计大都数还在家吧,只能在家线上办公。今天一起来学习下JS里如何实现类型转换;javascript 变量可以转换为新变量或其他数据类型,分为两种情况:
● 隐性转换:通过 JavaScript 自身自动转换
● 显性转换:通过使用 Javascript 函数进行转换
隐式转换
javascript中有各种运算符和函数,它们自动将值转换为正确的类型,如javaScript中的alert()函数接受任何值并将其转换为字符串。但是各种运算符会产生类似'+'运算符的问题。
例:
输入: “2”+“3” 输出: “23” 在这种情况下,这里的“+”运算符代表字符串连接。 但是,输入“3” - “1”就会通过使用“隐式转换”就会给出输出结果:2。
下面我们来看看隐式转换的简单代码示例:
代码1:此代码显示JavaScript中的隐式类型转换。
<script>
document.write('("3" - "1") = ' + ("3" - "1") + "<br>");
document.write('("3" - 1) = ' + ("3" - 1) + "<br>");
document.write('("3" * "2") = ' + ("3" * "2") + "<br>");
document.write('("3" % "2") = ' + ("3" % "2") + "<br>");
document.write('("3" + null) = ' + ("3" + Null) + "<br>");
</script>JavaScript是松散类型的语言,大多数情况下,运算符和函数会自动将值转换为正确的类型(隐式转换);但也有一些情况需要显式的进行类型转换。
显式转换
虽然JavaScript提供了多种方法可以将数据从一种类型转换为另一种类型,但有两种最常见的数据转换方式:
1)、将值转换为字符串
2)、将值转换为数字
3)、将值转换为布尔类型
下面我们就来看看javascript是如何实现这两种最常见的数据转换方式的。
1、将值转换为字符串:
使用string()或toString()函数将值转换为字符串。
String()函数
语法:
String(value);
例:
先使用 typeof value查看值的类型。
在使用String)函数进行转换,在查看值的类型
let value = true; alert(typeof value); // 显示值为:boolean类型 value = String(value); // 现在,值“true”是一个字符串类型 alert(typeof value); // 显示值为:string类型
toString()函数
语法:
variableName.toString(base)
例:
输入: var v = 1555; var s = v.toString(); 输出: 现在s包含的值是字符串类型:“1555”。
代码2:
下面的代码将数字转换为字符串,布尔值转换为字符串,日期转换为字符串。
<script>
// 分别定义编号:v和日期:d
var v = 123;
var d = new date('1995-12-17T03:24:00');
// 数转换为字符串
document.write(" String(v) = " + String(v) + "<br>");
// 数转换为字符串
document.write(" String(v + 11) = " + String(v + 11) + "<br>");
document.write(" String( 10 + 10) = " + String(10 + 10) + "<br>");
// 布尔值转换为字符串
document.write(" String(false) = " + String(false) + "<br>");
// 日期转换为字符串
document.write(" String(d) = " + String(d) + "<br>");
</script>2、将值转换为数字:
我们可以使用JavaScript中的Number()函数将值转换为数字。它可以将任何数字文本和布尔值转换为数字。如果是非数字字符串,它会将其转换为NaN(非数字)。
语法:
Number(valueToConvert)
示例:
代码1:下面的代码将数字文本,日期和布尔值转换为数字。
<script>
// 分别定义编号:v和日期:d
var v = "144";
var d = new Date('1995-12-17T03:24:00');
// 字符串转换为数字
document.write(" Number(v) = " + Number(v) + "<br>");
//布尔值转换为数
document.write(" Number(false) = " + Number(false) + "<br>");
document.write(" Number(true) = " + Number(true) + "<br>");
// 日期转换为数字
document.write(" Number(d) = " + Number(d) + "<br>");
</script>代码2:如果字符串是非数字,则将其转换为NaN,空格字符串或空字符串将转换为0。
<script>
// 指定空字符串
var v = "";
// 分配空白空间
var d = " ";
// 分配非数字串
var s = "GeeksforGeeks";
// 输出 数的转换值
document.write(" Number(v) = " + Number(v) + "<br>");
document.write(" Number(d) = " + Number(d) + "<br>");
document.write(" Number(s) = " + Number(s) + "<br>");
</script>3、将值转换为布尔类型
布尔转换是最简单的。
它发生在逻辑运算中,但也可以通过调用手动执行Boolean(value)。
转换规则:
1)、直观“空”的值,例如0,空字符串null,undefined并且NaN变为false。
2)、其他的值变为true。
语法:
Boolean(value)
示例:
// 数字转换为布尔值
document.write("Boolean(0) = " + Boolean(0) + "<br>");
document.write("Boolean(1) = " +Boolean(1) + "<br>");
document.write("Boolean(2) = " + Boolean(2) + "<br>");
// 字符串转换为布尔值
document.write(" Boolean('hello') = " + Boolean('hello') + "<br>");
document.write(" Boolean('') = " + Boolean('') + "<br>");
相关推荐
- 汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰 - Web前端
- 在JavaScript中,将存储布尔值的变量转换为“0”或“1”的常用方法 - Web前端
- 这些CSS3动画库,您是否都了解和应用过? - Web前端
- 分享Visual Studio Code的开发过程中常用的插件 - Web前端
- .vue文件里的export default解释 - Web前端
- 回顾JS规范中的相等、严格相等、零值相等以及同值相等 - Web前端
- 对于vuejs里import引用模板路径“@”的解释 - Web前端
- 聊聊JS里区间取随机数的方法:Math.random()和Math.floor() - Web前端
- 谷歌浏览器声明:2020年12月在Chrome中告别Flash - Web前端
- Web前端开发:关于vue中导入数组图片不能显示的解决方案 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 9在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


