前端开发必备：JavaScript 基础知识（三）

📕前端开发必备：JavaScript 基础知识（二）

        在上一篇中，我们学习了JavaScript的运算符与表达式，知道了如何用它们对数据进行计算和操作。但在实际开发中，数据并不总是同一种类型，比如数字和字符串的混合运算。这时，数据类型转换就派上了用场，它帮助我们将数据转换成合适的类型，确保运算结果正确无误。本文将带你了解数据类型转换的作用和用法，让你轻松掌握这一重要技巧。

数据类型转换

        在JavaScript中，数据类型转换的作用主要是确保操作的正确性和统一数据类型。例如，将字符串转换为数字后可以进行数学运算，或将不同类型的数据统一为相同类型以避免错误。这种转换帮助开发者处理动态类型语言中的潜在问题，确保代码逻辑的准确性和一致性。

1.转为String

• toString()

形式：变量.toString()

//Number类型 <=> String类型
var number1 = 23.39
var string1 = number1.toString()
console.log(string1,typeof string1);

 在控制台输出：

• String()

形式：String(变量)

// Number类型 <=> String类型
 var number2 =3.8
 var string2 =String(number2)
 console.log(string2,typeof string2);

在控制台输出：

• 隐式转换

在一个加法运算式中，如果出现一项为 String 类型数据，则js会将其当作字符串拼接，将任何数据类型都转为 String 进行拼接。因此可以利用这个特性，拼接一个空字符 " " 达到数据转换效果。

形式： 变量 + " "

// Number类型 <=> String类型
    var number3 = 30
    var string3 = number3 + ''
    console.log(string3,typeof string3);

 在控制台输出：

2.转为Number

• parseInt()

将形如数字的字符串，转为Number类型的整数。

形式： parseInt(String)

注意：此方法不会保留小数。

// String类型 <=> Number类型
    var string5 = '30'
    var number5 = parseInt(string5)
    console.log(number5,typeof number5);

    var string6 ='25.66'
    var number6 = parseInt(string6)
    console.log(number6,typeof number6);

在控制台输出：

• parseFloat()

将形如数字的字符串，转为Number类型浮点数。

形式： parseFloat(String)

 // String类型 <=> Number类型
    var string6 ='66.66'
    var number6 = parseFloat(string6)
    console.log(number6,typeof number6);

 在控制台输出：

• Number()

将形如数字的字符串，转为Number类型，会自动保留小数。

形式：Number(String)

   // // String类型 <=> Number类型
    //整数形式
    var string5 = '30'
    var number5 = Number(string5)
    console.log(number5,typeof number5);

    //小数形式
    var string6 = '66.66'
    var number6 = Number(string6)
    console.log(number6,typeof number6);

在控制台输出：

• 隐式转换

在一个只含有 乘法 * 、除法 / 、减法 - 的计算式中，js会将每一项都自动转化为 Number 类型进行运算。因此可以利用这个特性，进行算术运算达到数据转换的效果。

形式：变量 - 0 、变量 * 1 、变量 / 1

//乘法转换
    var string7 = '52'
    var number7 = string7 * 1
    console.log(number7,typeof number7);

    //除法转换
    var string8 = '53'
    var number8 = string8 / 1
    console.log(number8,typeof number8);

    //减法转换
    var string9 = '54'
    var number9 = string9 - 0
    console.log(number9,typeof number9);

在控制台输出：

3.转为Boolean

• Boolean()

代表空、否定的值会被转为false，如： 0 、NaN 、 ' '  、 " "  、undefined、null、false、错误的判断表达式，其余都会被转为true。

形式：Boolean(value)

var value = 2 - 2 
    var result = Boolean(value)
    console.log(value,result,typeof result);

在控制台输出：

总结

        通过本文的学习，我们了解了JavaScript中数据类型转换的重要性和常见方法。无论是隐式转换还是显式转换，它们都在确保数据正确交互和运算中发挥着关键作用。掌握这些技巧，不仅能避免潜在的代码错误，还能让你的程序更加灵活和健壮。结合上一篇的运算符与表达式知识，相信你已经能够更自信地处理JavaScript中的各种数据操作了！