您现在的位置是:首页 > 编程语言学习 > 前端编程语言 > 文章正文 前端编程语言

介绍4种用JavaScript将布尔值转换为整数数字的方法

酒醉疯子个人网站 2019-09-27 15:17:59 前端编程语言

简介在JavaScript中,布尔值表示两个值之一:true或false。但如何将存储布尔值的变量转换为整数“0”或“1”?下面本篇文章就来给大家介绍一下将布尔值转换为整数“0”或“1”的方法,希望对大家有所帮助。

  周末学习学习,充电能量,下面来介绍4种用JavaScript将布尔值转换为整数数字的方法。

  在JavaScript中,布尔值表示两个值之一:true或false。但如何将存储布尔值的变量转换为整数“0”或“1”?下面本篇文章就来给大家介绍一下将布尔值转换为整数“0”或“1”的方法,希望对大家有所帮助。

  在JavaScript中,想要将存储布尔值的变量转换为整数“0”或“1”,可以使用多种方法进行转换。下面是一些流行的方法:

  1、使用三元或条件“()? :”运算符。

  2、使用一元+运算符。

  3、使用按位和(&)或按位或(|)运算符。

  4、使用Number()函数。它将数据类型转换为数字。

  一、使用三元或条件“()? :”运算符

  语法

  1. var i = value ? 1 : 0; 

  来个实例玩玩吧。

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8"
  5. </head>  
  6. <body>  
  7.     <center>  
  8.         <h2 id="h" style="color:green"></h2> 
  9.         <h4>单击按钮,将布尔值更改为数字</h4>  
  10.         <button onclick="myFunction()">转换</button>  
  11.         <p>变量的数值为:</p>  
  12.         <p id="result" style="color:green"></p>  
  13.         <script>  
  14.             // 将boolvalue初始化为true 
  15.             var boolvalue = true 
  16.             document.getElementById("h").innerHTML="变量boolvalue的值为:"+boolvalue; 
  17.             function myFunction() {  
  18.                 var i = boolvalue ? 1 : 0;  
  19.                 document.getElementById("result").innerHTML = i;  
  20.             }  
  21.         </script>  
  22.   </center>  
  23. </body>  
  24.    
  25. </html> 

  二、使用一元“+”运算符

  语法

  1. var i = + boolvalue; 

  实例

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8"
  5.     </head>  
  6. <body>  
  7.     <center>  
  8.         <h2 id="h" style="color:green"></h2> 
  9.         <h4>单击按钮,将布尔值更改为数字</h4>  
  10.         <button onclick="myFunction()">转换</button>  
  11.         <p>变量的数值为:</p>  
  12.         <p id="result" style="color:green"></p>  
  13.         <script>  
  14.             // 将boolvalue初始化为true 
  15.             var boolvalue = true 
  16.             document.getElementById("h").innerHTML="变量boolvalue的值为:"+boolvalue; 
  17.             function myFunction(){  
  18.                 var i = + boolvalue;  
  19.                 document.getElementById("result").innerHTML = i;  
  20.             } 
  21.         </script>  
  22.   </center>  
  23. </body>  
  24.    
  25. </html> 

  三、使用按位和(&)或按位或(|)运算符

  语法:

  1. var i = boolvalue & 1; // 按位和(&) 
  2. var j = boolvalue | 0; // 按位或(|) 

  实例:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8"
  5.     </head>  
  6. <body>  
  7.     <center>  
  8.         <h2 id="h" style="color:green"></h2> 
  9.         <h2 id="h2" style="color:green"></h2> 
  10.         <h4>单击按钮,将布尔值更改为数字</h4>  
  11.         <button onclick="myFunction()">转换</button>  
  12.         <p>boolvalue的值现在为:</p>  
  13.         <p id="result"></p>  
  14.         <p>boolvalue2的值现在为:</p>  
  15.         <p id="result2"></p>  
  16.         <script>  
  17.             // 将boolvalue初始化为true 
  18.             var boolvalue = true;  
  19.             // 将boolvalue2初始化为false 
  20.             var boolvalue2 = false;  
  21.             document.getElementById("h").innerHTML="变量boolvalue的值为:"+boolvalue; 
  22.             document.getElementById("h2").innerHTML="变量boolvalue2的值为:"+boolvalue2; 
  23.             function myFunction(){  
  24.                 var i = boolvalue & 1; 
  25.                 var j = boolvalue2 | 0; 
  26.                 document.getElementById("result").innerHTML = i; 
  27.                 document.getElementById("result2").innerHTML = j; 
  28.             } 
  29.         </script>  
  30.   </center>  
  31. </body>  
  32. </html> 

  四、使用Number()函数将数据类型转换为数字

  语法:

  1. var i = Number(boolvalue); 

  实例:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8"
  5.     </head>  
  6. <body>  
  7.     <center>  
  8.         <h2 id="h" style="color:red"></h2> 
  9.         <h4>单击按钮,将布尔值更改为数字</h4>  
  10.         <button onclick="myFunction()">转换</button>  
  11.         <p style="color:red">变量boolvalue的数值现在为:</p>  
  12.         <p id="result" style="color:red"></p>  
  13.         <script>  
  14.             // 将boolvalue初始化为false 
  15.             var boolvalue = false 
  16.             document.getElementById("h").innerHTML="变量boolvalue的值为:"+boolvalue; 
  17.             function myFunction(){  
  18.                 var i = + boolvalue;  
  19.                 document.getElementById("result").innerHTML = i;  
  20.             } 
  21.         </script>  
  22.   </center>  
  23. </body>  
  24.    
  25. </html> 

相关文章

站点信息