JS中的数据转换

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

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

JS中的数据转换

toString() 方法

toFixed() 方法

字符串拼接

使用加号运算符

使用concat()方法

转换为布尔型 `Boolean`

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

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

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

数字型Number

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JavaScript

JS中的数据转换

toString() 方法

toFixed() 方法

字符串拼接

使用加号运算符

使用concat()方法

转换为布尔型 Boolean

数字转换 parseInt parseFloat Number

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

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

数字型Number

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JavaScript

转换为布尔型 `Boolean`

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