JS中的数据转换

作者: 小小前端搬运工 | 来源:发表于2022-03-16 13:40 被阅读0次

2、强制数据类型转换
js中的类型转换
JS里的数据类型转换
JS中的数据转换
JavaScript类型转换
JavaScript 01 (JS引入/变量/数据类型/类型转换
JS 里的数据类型转换
JS里的数据类型转换
javaScript中数据类型转换方法
数据类型转换

toString() 方法

toString()以字符串返回数值。
toString()方法可把一个 Number 对象转换为一个字符串，并返回结果。
所有数字方法可用于任意类型的数字（字面量、变量或表达式）

<!DOCTYPE html>
<html>
<body>
    <script type="text/javascript">
        var text = new Number(64);
        console.log(typeof text.toString()) // string
        console.log(text.toString())  // 64
        var num = 12
        console.log(typeof num); // number
        console.log(typeof num.toString()); // string
        console.log(num.toString(2));   //1100
        console.log(num.toString(8));   // 14
    </script>
</body>
</html>

tostring.png

这里先后转换了4个值，数值、布尔值、null和underfined。数字和布尔值的转换结果和调用toString()方法得到的结果相同。由于null和underfined没有toString（）方法，所有Stiring（）方法返回了这两个值得字面量；
在不知道要转换的值是不是null和underfined的情况下，可以使用String()方法。该函数可以将任何类型的值转成字符串。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var num = 10;
        console.log(num.toString()); //"10"
        console.log(num.toString(2)); //"1010"
        console.log(num.toString(8)); //"12"
        console.log(num.toString(10)); //"10"
        console.log(num.toString(16)) //"a"
        console.log(toString(null));// [object Undefined]

        var value1 = 10;
        var value2 = true;
        var value3 = null;
        var value4;

        console.log(String(value1));//"10"
        console.log(String(value2));//"true"
        console.log(String(value3));//"null"
        console.log(String(value4));//"underfined"
    </script>
</body>
</html>

toString。.png

toFixed() 方法

toFixed() 返回字符串值，它包含了指定位数小数的数字
括号数字为多少就返回小数点后多少位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .main{
      width: 800px;
      margin: 50px auto;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1>JavaScript 数字方法</h1>
  <p>toFixed() 方法将数字四舍五入为给定的位数。</p>
  <p>对于处理金钱，toFixed(2) 是完美的。</p>
  <p id="demo"></p>
  <script>
    var x = 9.656;
    document.getElementById("demo").innerHTML =
      x.toFixed(0) + "<br>" +
      x.toFixed(2) + "<br>" +
      x.toFixed(4) + "<br>" +
      x.toFixed(6);
  </script>
  </div>
</body>
</html>

toFix().png

isNaN() 这个方法用来判断非数字并且返回一个值如果是数字返回的是 false 如果不是数字返回的是true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // isNaN() 这个方法用来判断非数字 并且返回一个值 如果是数字返回的是 false 如果不是数字返回的是true
        console.log(isNaN(12)); // false
        console.log(isNaN('blue')); // true
    </script>
</body>
</html>

isNaN.png

字符串拼接

使用加号运算符

连接字符串最简便的方法是使用加号运算符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // 1. 检测获取字符串的长度 length 
        var str = 'how are you';
        console.log(str.length); // 11
        // 2. 字符串的拼接 +  只要有字符串和其他类型相拼接 最终的结果是字符串类型
        console.log('蓝色' + '天空'); // 字符串的 蓝色天空
        console.log('蓝色' + 18); // '蓝色18'
        console.log('blue' + true); // bluetrue
        console.log(12 + 12); // 24
        console.log('12' + 12); // '1212'
    </script>
</body>
</html>

字符串转换.png

使用concat()方法

使用字符串 concat() 方法可以把多个参数添加到指定字符串的尾部。该方法的参数类型和个数没有限制，它会把所有参数都转换为字符串，然后按顺序连接到当前字符串的尾部最后返回连接后的字符串。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var s1 = "abc", s2 = "def";
        console.log(s1 + s2);  //返回字符串“abcdef”
    </script>
    <script>
        var s1 = "abc";
        var s2 = s1.concat("d" , "e" , "f");  //调用concat()连接字符串
        console.log(s2);  //返回字符串“abcdef”
    </script>
</body>
</html>

字符串拼接.png

转换为布尔型 `Boolean`

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(Boolean('')); // false
        console.log(Boolean(0)); // false
        console.log(Boolean(NaN)); // false
        console.log(Boolean(null)); // false
        console.log(Boolean(undefined)); // false
        console.log('------------------------------');
        console.log(Boolean('123'));   // true
        console.log(Boolean('你好吗')); // true
        console.log(Boolean('我很好')); // true
    </script>
</body>
</html>

Boolean.png

数字转换 `parseInt` `parseFloat` `Number`

parseInt(param)：把字符串转换成整数，param是字符串类型。

parseInt()忽略字符串前面的空格，直到找到第一个非空格字符S；若S不是数字或者负号，则返回NaN（即parseInt()对空字符返回NaN，注意Number()对空返回0），若S是数字，parseInt()会继续解析下一个字符，直到解析完所有字符或者遇到了一个非数字字符。parseInt()支持对八进制、十六进制的解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var num1 = parseInt("1234blue");
        console.log(num1); // 1234 
        var num2 = parseInt("");
        console.log(num2); // NaN 
        var num3 = parseInt("22.5");
        console.log(num3); // 22 
        var num4 = parseInt("070");
        console.log(num4); //八进制，转换为十进制的56
    </script>
</body>
</html>

parseFloat(param)：把字符串转换成浮点数，param是字符串类型。

与parseInt类似，parseFloat()从第一个字符开始解析，直到解析完所有字符或者遇到了一个非浮点数字符。第一个小数点有效，但是第二个则无效，且该函数只能解析十进制数，因为它始终会忽略前导0.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var num1 = parseFloat("1234blue"); 
        console.log(num1); // 1234 
        var num2 = parseFloat("0xf6"); 
        console.log(num2); // 0 
        var num3 = parseFloat("22.5");  
        console.log(num3); // 22.5 
        var num4 = parseFloat("22.5.4");
        console.log(num4); //22.5 
        var num5 = parseFloat("3.125e7");
        console.log(num5); // 31250000</span>
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // var age = prompt('请输入您的年龄');
        // 1. parseInt(变量)  可以把 字符型的转换为数字型 得到是整数
        // console.log(parseInt(age));
        console.log(parseInt('3.14')); // 3 取整
        console.log(parseInt('3.94')); // 3 取整
        console.log(parseInt('120px')); // 120 会去到这个px单位
        console.log(parseInt('rem120px')); // NaN
        // 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数
        console.log(parseFloat('3.14')); // 3.14
        console.log(parseFloat('120px')); // 120 会去掉这个px单位
        console.log(parseFloat('rem120px')); // NaN
        // 3. 利用 Number(变量) 
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));
        // 4. 利用了算数运算 -  *  /  隐式转换
        console.log('12' - 0); // 12
        console.log('123' - '120');
        console.log('123' * 1);
    </script>
</body>
</html>

数字转换.png

数字型Number

Number(param)函数：param可以用于任何数据类型
param是Boolean值，true和false分别转换为1和0；
param是数值，只是简单的传入和返回
param是null和undefined，分别返回0和NaN
param是字符串，遵循下列规则：
如果字符串中只包含数字，则转换为十进制，前导0被忽略；
如果字符串中包含有效的浮点数格式，则返回对应的浮点数值，前导0被忽略；
如果字符串包含有效的十六进制，则返回等大的十进制数值
如果字符串为空，则返回0
如果字符串中包含除上述格式外的字符，则返回NaN
param是对象，则调用valueOf()方法，依照前面的规则转换返回字符串值，若返回NaN，则调用toString()方法，再次依照前面的规则转换返回字符串值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var num = 10; // num 数字型 
        var PI = 3.14 // PI 数字型
            // 1. 八进制  0 ~ 7  我们程序里面数字前面加0 表示八进制
        var num1 = 010;
        console.log(num1); //  010  八进制 转换为 10进制 就是  8 
        var num2 = 012;
        console.log(num2); // 10
        // 2. 十六进制  0 ~ 9  a ~ f    #ffffff  数字的前面加 0x 表示十六进制
        var num3 = 0x9;
        console.log(num3); // 9
        var num4 = 0xa;
        console.log(num4); // 10
        // 3. 数字型的最大值
        console.log(Number.MAX_VALUE);
        // 4. 数字型的最小值
        console.log(Number.MIN_VALUE);
        // 5. 无穷大
        console.log(Number.MAX_VALUE * 2); // Infinity 无穷大  
        // 6. 无穷小
        console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
        // 7. 非数字
        console.log('blue' - 100); // NaN

        var num11 = Number("hello");
        console.log(num11); //NaN 
        var num22 = Number("");
        console.log(num22); //0 
        var num33 = Number("00022");
        console.log(num33); //22 
        var num44 = Number(true);
        console.log(num44); //1
    </script>
</body>
</html>

Number.png

2、强制数据类型转换
数据类型转换：在js中，数据类型的转换有两种，分别是自动转换和强制转换自动转换：自动转换是用JS进行某些操作...
js中的类型转换
在js中数据转换分为3种：隐式类型转换，强制类型转换，函数转换 1.隐式类型转换（1）：运算符转换 js中的值在...
JS里的数据类型转换
在js中，数据类型转换分为显式数据类型转换和隐式数据类型转换。 1，显式数据类型转换 a:转数字： 1）Numb...
JS中的数据转换
toString() 方法 toString()以字符串返回数值。toString()方法可把一个 Number ...
JavaScript类型转换
在js中数据类型转换一般分为两种，即强制类型转换和隐式类型转换(利用js弱变量类型转换)。强制类型转换即通过使...
JavaScript 01 (JS引入/变量/数据类型/类型转换
JS的引入及调试,常量,字面量,变量,JS中的数据类型,JS的运算符,JS的运算符之隐式类型转换,强制类型转换,M...
JS 里的数据类型转换
JS 里的数据类型转换 Js中的数据类型一共有7种，即number，string，boolean，underfin...
JS里的数据类型转换
上一篇文章（JS里的数据类型）介绍了js中的数据类型。这篇主要介绍数据类型转换。一、任意类型转字符串转换成st...
javaScript中数据类型转换方法
JS 数据类型转换方法主要有三种转换函数、强制类型转换、利用js变量弱类型转换。 1. 转换函数： js提供了...
数据类型转换
JS 数据类型转换方法主要有三种转换函数、强制类型转换、利用js变量弱类型转换。 1. 转换函数： js提供了...