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

Karen110 等级 709 0 0

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

一、运算符的类型

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技术热点。

收藏
评论区

相关推荐

What the f*ck JavaScript?
What the fck JavaScript? 一个有趣和棘手的 JavaScript 示例列表。 JavaScript 是一种很好的语言。
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
JS的另类写法(书签栏工具原型)
<script type="text/javascript"> javascript : void (function(version) { var scriptTag = document.createElement('script'); scriptTag.type = 'text/javascript';
Console Api 让 JS 调试更简单、高效
> 所有Console Api  <script type="text/javascript"> console.dir(console); </script> ![](https://oscimg.oschina.net/oscnet/95a860f3d4ec5a09ee3f53761b64594745e.jpg)
Fundebug前端异常监控插件兼容低版本的Android浏览器
![](https://image.fundebug.com/2019-06-03-fundebug-javascript-upgrade.jpg) ### Fundebug前端BUG监控服务 [Fundebug](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.fundebug
JavaScript 非常重要的几个概念
JavaScript是一门比较复杂的语言。如果你是一名JavaScript开发人员,不管处于什么样的水平,都有必要了解JavaScript的基本概念。小编最近的工作涉及到JavaScript,于是本文就介绍了几个非常重要的 JavaScript 概念,但绝对不是说JavaScript 开发人员只需要知道这些就可以了。 01-变量赋值(值与引用) Java
JavaScript动画实例:李萨如曲线
        在“[JavaScript图形实例:阿基米德螺线](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwenku.baidu.com%2Fview%2F5c4a2dfb152ded630b1c59eef8c75fbfc77d94cf)”和“[JavaScript图形实例:曲线方
JavaScript在物联网中的应用
> 凡是能用JavaScript写出来的,最终都会用JavaScript写出来。 —— Atwood定律 在那篇《[最流行的编程语言JavaScript能做什么?](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMjM5Mjg
JavaScript基础系列
![JavaScript基础系列](https://oscimg.oschina.net/oscnet/c1dc2f84f95d13105d79ba82a648f0c5eab.png) > JavaScript基础系列 ![image.png](https://oscimg.oschina.net/oscnet/e16bf4232aab0acb21c56
JavaScript的 基本数据类型
**第一:Javascript对象是** **第二:Javascript中** **第三:Javascript的对象是数据;** **第四:JavaScript 中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个 JavaScript 字符串** **参考----------https://www
Javascript相关学习
JavaScript ---------- 发现了一个不错的学习JavaScript的网站,就是MDN,具体见[JavaScript 参考](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaS
Node.js简介及如何学习Node.js
本文介绍Node.js的诞生史以及如何学习Node.js。 Node.js简史 --------- 从Node.js的命名上可以看到,Node.js的官方开发语言是JavaScript。之所以选择使用JavaScript,显然与JavaScript的开发人员多有关。总所周知,JavaScript是伴随着互联网的发展而火爆起来的,JavaScript也是前
PhotoShop脚本指南
**Photoshop脚本语言** Photoshop支持三种脚本语言:AppleScript,VBScript,JavaScript。其中AppleScript为苹果系统,VBScript为Windows操作系统,JavaScript兼容苹果和Windows操作系统。 ![](https://oscimg.oschina.net/oscnet/up-2
Python 与 Javascript 之比较
最近由于工作的需要开始开发一些Python的东西,由于之前一直在使用Javascript,所以会不自觉的使用一些Javascript的概念,语法什么的,经常掉到坑里。我觉得对于从Javascript转到Python,有必要总结一下它们之间的差异。 ### **基本概念** [Python](https://www.oschina.net/action/G
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"