JavaScript数据类型转换

数据类型转换

一、强制类型转换

JS中常见的3种强制类型转换

Number(value)——把给定的值转换成数字(可以是整数或浮点数)

Boolean(value)——把给定的值转换成Boolean型

String(value)——把给定的值转换成字符串

1. Number(value)

把给定的值转换成数字(可以是整数或浮点数)，它转换的是整个值，而不是部分值。

<script>
        /* Number(value)——把给定的值转换成数字(可以是整数或浮点数)，它转换的是整个值，而不是部分值。 */
        console.log(Number("123.123")); // 输出: 123.123
        console.log(Number("powernode"));        // 输出: NaN
        console.log(Number("123.12powernode"));  // 输出: NaN
        console.log(Number(true));  // 输出: 1

    </script>

2. Boolean(value)

把给定的值转换成Boolean型。

当value其值为 0、-0、null、""、false、undefined 或 NaN 时，那么Boolean()转换成Boolean类型的值为 false。

 <script>
        /* Boolean(value)——把给定的值转换成Boolean型。
        当value其值为 0、-0、null、""、false、undefined 或 NaN 时，那么Boolean()转换成Boolean类型的值为 false。
         */
        console.log(Boolean(-0));          // 输出: false
        console.log(Boolean(null));        // 输出: false
        console.log(Boolean(undefined));   // 输出: false
        console.log(Boolean(""));          // 输出: false
        console.log(Boolean(NaN));         // 输出: false
        console.log(Boolean(false));       // 输出: false
        console.log(Boolean(1));       // 输出:true

    </script>

3. String(value)

把给定的值转换成字符串

 <script>
        // String(value)——把给定的值转换成字符串
        console.log(String(123));          // 输出: "123" 
        console.log(String(true));         // 输出: "true"
        console.log(String(false));        // 输出: "false"
        console.log(String(undefined));    // 输出: "undefined"
        console.log(String(null));         // 输出: "null"  
        console.log(String(NaN));          // 输出: "NaN"

    </script>

二、隐式类型转换

number类型和number类型可以相加，作为数字类型的加法运算; string类型也可以和string类型相加，相当于拼接字符串。

<script>
        /* number类型和number类型可以相加，作为数字类型的加法运算; string类型也可以和string类型相加，相当于拼接字符串。 */
        var number = 1 + 2;
        console.log(number); // 输出：3
        var string = "hello" + "world";
        console.log(string);  // 输出：Hello World!

        // 不同的数据类型可以相加吗? 比如string类型和number类型?
        var str = "Hello World " + 2017;
        console.log(str);           // 输出: Hello World 2017
        console.log(typeof str);    // 输出: string
        /* 因为JavaScript的数据类型是非常弱的，在使用算术运算的时候，JS的引擎在运算之前把number类型悄悄的进行了隐式转换，把number类型隐式转换为string类型，然后做了string类型与string类型的拼接。 */
        var num = 2 + true;
        console.log(num);           // 输出: 3
        console.log(typeof num);    // 输出: number

        var str3 = "22" + true;
        console.log(str3);          // 输出: 22true
        console.log(typeof str3);   // 输出: string
/* 隐式转化其实也是按照我们前一节强制转换的规则来转换的，在我们今后的JavaScript学习过程中，会经常的遇到隐式类型的转换，所以大家一定要记住强制转换之间的规则，尤其是Boolean()的隐式转换。 */
    </script>
  

注：“+”既可以表示字符串连接，又可以表示算术加，这取决于它的操作数，如果有一个为字符串的，那么就是字符串连接了。

  <script>
        console.log(1 + 2 + "3");   // 输出：33 数据类型：string
        console.log(1 + "2" + 3);   // 输出：123 数据类型：string
        var a = 11;
        var b = 22;
        console.log("a + b");       // 输出：a+b 数据类型：string
        console.log(a + "b");       // 输出：11b 数据类型：string
        console.log(a + b);         // 输出：33 数据类型：number
    </script>

通过隐式转换,把string转化为number

注：此处要根据运算后面的类型，想想要怎么样才能和后面进行运算，然后就隐式转换成那种形式（下面的两个代码块）。

<script>
        var str = "123.456";
        console.log(str - 0);           // 输出: 123.456
        console.log(typeof (str - 0));   // 输出: number
        // 也可以这样
        console.log(+str);              // 输出: 123.456
        console.log(typeof (+str));      // 输出: number

    </script>

通过隐式转换,把number转化为string

 <script>
        var num2 = 123.456;
        console.log(num2 + "");          // 输出: ‘123.456’
        console.log(typeof (num2 + ""));  // 输出: string


    </script>
    <script>
        var num2 = 123.456;
        console.log(num2 + "");          // 输出: ‘123.456’
        console.log(typeof (num2 + ""));  // 输出: string


    </script>

三、parseInt和parseFloat函数

1. parseInt函数

parseInt() 函数可解析一个字符串，并返回一个整数。

<script>
        /* parseInt() 函数可解析一个字符串，并返回一个整数。 */
        // 全是字母的时候
        console.log(parseInt("powernode"));              // 输出: NaN
        // 全是数字的时候
        console.log(parseInt("12.42"));            // 输出：12
        // 如果字母和数字都存在
        console.log(parseInt("123powernode"));           // 输出: 123
        console.log(parseInt("123powernode234node567")); // 输出: 123
        console.log(parseInt("node123"));           // 输出：NaN
        /* 总结：如果参数第一个字符不是数字，返回NaN；如果参数第一个字符是数字，则返回前面找到的所有的数字字符。 */
   
    </script>

注：如果参数第一个字符不是数字，返回NaN；如果参数第一个字符是数字，则返回前面找到的所有的数字字符。

注: 开头和结尾的空格是允许的。

  console.log(parseInt(" 123123powernode"));       // 输出: 123123
        console.log(parseInt(" 123 "));            // 输出: 123

2. parseFloat函数

parseFloat() 函数可解析一个字符串，并返回一个浮点数。

<script>
        /* parseFloat() 函数可解析一个字符串，并返回一个浮点数。 */
        // 全是字母的时候
        console.log(parseFloat("powernode"));     // 输出: NaN
        // 全是数字的时候
        console.log(parseFloat(123));       // 输出: 123
        console.log(parseFloat(123.456));   // 输出: 123.456
        // 如果字母和数字都存在
        console.log(parseFloat("123.12powernode"));          // 输出: 123.12
        console.log(parseFloat("123.12powernode456powernode"));    // 输出: 123.12
        console.log(parseFloat("powernode123.1"));           // 输出: NaN
        /* 总结：如果参数的第一个字符不是数字，则返回NaN；如果参数的第一个字符是数字，则返回前面找到的所有的数字字符（包含小数）。 */
        // 注意:开头和结尾的空格是允许的。
        console.log(parseFloat(" 123.456node")); // 返回:123.456
    </script>

注：如果参数的第一个字符不是数字，则返回NaN；如果参数的第一个字符是数字，则返回前面找到的所有的数字字符（包含小数）

开头和结尾的空格是允许的。

 console.log(parseFloat(" 123.456node")); // 返回:123.456