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

时间:2022-10-02 17:21:48

一篇文章带你了解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> 
  12. document.write( 
  13. typeof "" + "<br>" + 
  14. typeof "Json" + "<br>" + 
  15. typeof "42" + "<br>" + 
  16. typeof 42 + "<br>" + 
  17. typeof true + "<br>" + 
  18. typeof false + "<br>" + 
  19. typeof undefined + "<br>" + 
  20. typeof null + "<br>" + 
  21. typeof { 
  22. name"Json"
  23. age: 22 
  24. } + "<br>" + 
  25. typeof [2, 4, 6, 8] + "<br>" + 
  26. typeof 
  27. function myFunc() {} 
  28. ); 
  29. </script> 
  30.  
  31. <p> <b>注意:</b> <b> typeof </b> 
  32.     运算符为数组返回"object",因为在JavaScript数组中是对象。</p> 
  33.  
  34. </body> 
  35. </html> 

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

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

二、类型转换

 

1. 将值转换为字符串

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

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

数字传递给函数。

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

使用typeof运算符检查类型。

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

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

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

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

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

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

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

2. 将值转换为布尔值

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

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

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

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

  1. <script> 
  2. document.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> 

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

注意:

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

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

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

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

3. 将数组转换为字符串

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

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

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

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

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

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

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

4. 将字符串转换为数组

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

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

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

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

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

使用“ i”作为分隔符。

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

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

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

  1. <script> 
  2. function 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. </script> 

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

三、总结

 

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

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

原文地址:https://mp.weixin.qq.com/s/BkD2xcCkYjXPLUjhiDqhGA