一篇文章带你了解JavaScript类型转换

Karen110
• 阅读 1168

类型转换是一种将一种数据类型转换为另一种数据类型的方法。

一、运算符的类型

typeof运算符可以帮助你找到你的变量的类型。typeof运算符返回一个变量或表达式的类型。

例:

<!DOCTYPE html>
<html>
<title>项目</title>

<body style="background-color: aqua;">

<h1> JavaScript typeof运算符</h1>

<p> typeof运算符返回变量或表达式的类型:</p>

<script>
document.write(
typeof "" + "<br>" +
typeof "Json" + "<br>" +
typeof "42" + "<br>" +
typeof 42 + "<br>" +
typeof true + "<br>" +
typeof false + "<br>" +
typeof undefined + "<br>" +
typeof null + "<br>" +
typeof {
name: "Json",
age: 22
} + "<br>" +
typeof [2, 4, 6, 8] + "<br>" +
typeof
function myFunc() {}
);
</script>

<p> <b>注意:</b> <b> typeof </b>
    运算符为数组返回"object",因为在JavaScript数组中是对象。</p>

</body>
</html>

一篇文章带你了解JavaScript类型转换

可以使用typeof运算符查找JavaScript变量的数据类型。

二、类型转换

1. 将值转换为字符串

通过调用String()函数 或 x.toString()方法将值显式转换为字符串。通过该String()函数,将值true传递给参数,从而将布尔值转换为字符串。

String(true);// 返回 "true"

数字传递给函数。

String(108);// 返回 "108"

使用typeof运算符检查类型。

typeof String(true); // 返回 "string"
typeof String(108);  // 返回 "string"

x.toString()以类似的方式使用方法。可以将x替换为变量。

<script>
let temp = 108;
document.querySelector("#output").innerHTML = temp.toString();
</script>

或者,可以将值放在括号内,而不是使用x.toString()进行变量设置。


(9048).toString();// 返回 "9048"
(false).toString();   // 返回 "false"
(50 + 20).toString(); // 返回 "70"

一篇文章带你了解JavaScript类型转换

通过使用String()或,x.toString()可以将Boolean或number数据类型的值显式转换为字符串值,以确保的代码按预期运行。

2. 将值转换为布尔值

将数字或字符串转换为布尔值,使用该Boolean()函数。任何被解释为空的值(例如数字0,空字符串或未定义或NaN或null的值)都将转换为false

<script>
document.write(
 Boolean(0) + "<br>" +
 Boolean("") + "<br>" +
 Boolean(undefined) + "<br>" +
 Boolean(NaN) + "<br>" +
 Boolean(null)
);
</script>

一篇文章带你了解JavaScript类型转换

其他值将转换为true,包括由空格组成的字符串文字。

<script>
document.write(
 Boolean(50) + "<br>" +
 Boolean(-50) + "<br>" +
 Boolean(3.14) + "<br>" +
 Boolean("false") + "<br>" +
 Boolean("Hello World")
);
</script>

一篇文章带你了解JavaScript类型转换

注意:

“ 0”作为字符串文字将转换为true,因为它是一个非空的字符串值。

Boolean("0");   // 返回 true

一篇文章带你了解JavaScript类型转换

将数字和字符串转换为布尔值可以使能够评估二进制内的数据,并且可以利用它来指定程序中的指定流。

3. 将数组转换为字符串

该toString()方法将数组转换为(逗号分隔)数组值的字符串。

var months = ["Jan", "Feb", "Mar", "Apr", "May"];
document.getElementById("result").innerHTML = months.toString();

一篇文章带你了解JavaScript类型转换

该join()方法还将数组的所有元素转换为新的字符串。

此方法的行为类似于toString(),还可以指定分隔符。

<script>
var fruits = ["Banana", "Apple", "Mango"];
var result = document.getElementById("result");

result.innerHTML = fruits.join("") + "<br>";
result.innerHTML += fruits.join(" ") + "<br>";
result.innerHTML += fruits.join(" + ") + "<br>";
result.innerHTML += fruits.join(" / ") + "<br>";
result.innerHTML += fruits.join(" &copy; ");
</script>

一篇文章带你了解JavaScript类型转换

4. 将字符串转换为数组

该split()方法将字符串拆分为子字符串数组,然后返回新数组,使用该split()方法通过以表示的空格字符分隔数组 " "。

var str = 'Helow World is an Amfhyeaadehe.';
var arr = str.split(" ");

一篇文章带你了解JavaScript类型转换

arr变量中有了一个新数组,可以使用索引号访问每个元素。


arr[0];   // Air
arr[2];   // is

使用“ i”作为分隔符。


<script>
function myFunc() {
   var str = 'Air Pollution is introduction of chemicals to the atmosphere.';
   var arr = str.split("i");
   document.getElementById('x').innerHTML = arr;
}
</script>

一篇文章带你了解JavaScript类型转换

如果将空字符串("")用作分隔符,则该字符串将转换为字符数组。

<script>
function myFunc() {
   var str = 'Air Pollution is introduction of chemicals to the atmosphere.';
   var arr = str.split("");
   document.getElementById('x').innerHTML = arr;
}
</script>

一篇文章带你了解JavaScript类型转换

三、总结


本文基于JavaScript 基础。介绍了JavaScript 类型转换,对于每一种类型转换,对于每一种转换需要注意的点,在实际项目遇到的难点,提供了有效的解决方案。

通过案例的分析,希望能够帮助读者更好的理解JavaScript 。

**-----**------**-----**---**** End **-----**--------**-----**-****

一篇文章带你了解JavaScript类型转换

往期精彩文章推荐:

一篇文章带你了解JavaScript类型转换

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】:https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
技术小男生 技术小男生
4个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi/etc/profile2:按字母键i进入编辑模式,在最底部添加内容:JAVAHOME/opt/jdk1.8.0152CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jarPATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Souleigh ✨ Souleigh ✨
1年前
JS - typeof 与 instanceof
一、typeoftypeof操作符返回一个字符串,表示未经计算的操作数的类型使用方法如下:typeof operandtypeof(operand)operand表示对象或原始值的表达式,其类型将被返回举个例子typeof 1 // 'number'typeof '1' // 'string'
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
helloworld_34035044 helloworld_34035044
7个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue