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

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

一、运算符的类型

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

例：

1<!DOCTYPE html>
2<html>
3<title>项目</title>
4
5<body style="background-color: aqua;">
6
7<h1> JavaScript typeof运算符</h1>
8
9<p> typeof运算符返回变量或表达式的类型：</p>
10
11<script>
12document.write(
13typeof "" + "<br>" +
14typeof "Json" + "<br>" +
15typeof "42" + "<br>" +
16typeof 42 + "<br>" +
17typeof true + "<br>" +
18typeof false + "<br>" +
19typeof undefined + "<br>" +
20typeof null + "<br>" +
21typeof {
22name: "Json",
23age: 22
24} + "<br>" +
25typeof [2, 4, 6, 8] + "<br>" +
26typeof
27function myFunc() {}
28);
29</script>
30
31<p> <b>注意：</b> <b> typeof </b>
32    运算符为数组返回"object"，因为在JavaScript数组中是对象。</p>
33
34</body>
35</html>

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

二、类型转换

1. 将值转换为字符串

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

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

数字传递给函数。

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

使用typeof运算符检查类型。

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

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

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

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

1
2(9048).toString();// 返回 "9048"
3(false).toString();   // 返回 "false"
4(50 + 20).toString(); // 返回 "70"

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

2. 将值转换为布尔值

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

1<script>
2document.write(
3 Boolean(0) + "<br>" +
4 Boolean("") + "<br>" +
5 Boolean(undefined) + "<br>" +
6 Boolean(NaN) + "<br>" +
7 Boolean(null)
8);
9</script>

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

1<script>
2document.write(
3 Boolean(50) + "<br>" +
4 Boolean(-50) + "<br>" +
5 Boolean(3.14) + "<br>" +
6 Boolean("false") + "<br>" +
7 Boolean("Hello World")
8);
9</script>

注意：

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

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

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

3. 将数组转换为字符串

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

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

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

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

1<script>
2var fruits = ["Banana", "Apple", "Mango"];
3var result = document.getElementById("result");
4
5result.innerHTML = fruits.join("") + "<br>";
6result.innerHTML += fruits.join(" ") + "<br>";
7result.innerHTML += fruits.join(" + ") + "<br>";
8result.innerHTML += fruits.join(" / ") + "<br>";
9result.innerHTML += fruits.join(" &copy; ");
10</script>

4. 将字符串转换为数组

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

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

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

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

使用“ i”作为分隔符。

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

如果将空字符串（""）用作分隔符，则该字符串将转换为字符数组。

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

三、总结

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

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

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

往期精彩文章推荐：

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