返回

从基本数据到基本数据，简单快速又准确

前端

乘风破浪，类型转换知多少

数据类型转换在程序中可谓举足轻重，让你能在类型间的阡陌交通中畅行无阻。

巧用Number，数字转换任你行

Number类型是计算机编程语言中表示数值的标准类型。以下为Number类型与其他类型之间的转换规则：

  1. String to Number: 将字符串形式的数字转换为数值。
const num = Number("123"); // num 为 123
  1. Boolean to Number: 将布尔值转换为数值。
const num = Number(true); // num 为 1
const num = Number(false); // num 为 0
  1. Null and Undefined to Number: 将null和undefined转换为数值。
const num = Number(null); // num 为 0
const num = Number(undefined); // num 为 NaN
  1. Array to Number: 将数组转换为数值。
const num = Number([1, 2, 3]); // num 为 NaN

灵动转换，基本类型信手拈来

除了Number类型外，JavaScript还提供了许多其他基本类型，如String、Boolean等。

  1. String to Boolean: 将字符串转换为布尔值。
const bool = Boolean("true"); // bool 为 true
const bool = Boolean("false"); // bool 为 false
  1. Number to Boolean: 将数值转换为布尔值。
const bool = Boolean(1); // bool 为 true
const bool = Boolean(0); // bool 为 false
  1. Boolean to String: 将布尔值转换为字符串。
const str = String(true); // str 为 "true"
const str = String(false); // str 为 "false"
  1. Number to String: 将数值转换为字符串。
const str = String(123); // str 为 "123"
const str = String(3.14); // str 为 "3.14"

点石成金，巧用parseInt和parseFloat

除了上述基本类型之间的转换外，JavaScript还提供了parseInt和parseFloat这两个函数，用于将字符串转换为整数或浮点数。

parseInt：让数字与字符串邂逅

parseInt函数可将字符串转换为整数，并可指定进制。

const num = parseInt("123"); // num 为 123
const num = parseInt("0111", 2); // num 为 7

parseFloat：让小数也能欢歌

parseFloat函数可将字符串转换为浮点数。

const num = parseFloat("3.14"); // num 为 3.14
const num = parseFloat("1e2"); // num 为 100

转换规则，务必牢记

1. 严格模式下的隐式转换：

  • 将null和undefined转换为数值时，结果为0。
  • 将布尔值转换为数值时，true为1，false为0。
  • 将字符串转换为数值时，如果字符串中包含非数字字符，则结果为NaN。
  • 将对象转换为数值时，结果为NaN。

2. 显式转换：

  • 使用Number()、String()、Boolean()等函数进行显式转换时，遵循上述转换规则。
  • 使用parseInt()和parseFloat()函数转换字符串时，如果字符串中包含非数字字符，则函数将忽略这些字符并返回转换结果。

深入理解，转换进阶

位运算：让比特翩翩起舞

位运算符(&、|、^、<<、>>)可对数字进行位级操作，从而实现一些特殊的效果。

const num1 = 10; // 二进制：1010
const num2 = 5; // 二进制：0101
const result = num1 & num2; // 二进制：0000，结果为 0

按位异或运算：解密与加密的舞蹈

按位异或运算符(^)可用于加密和解密数据。

const secret = "Hello world";
const key = 123;
const encrypted = secret ^ key; // 加密
const decrypted = encrypted ^ key; // 解密
console.log(decrypted); // 输出：Hello world

登堂入室，数据结构的转换

除了基本类型转换外，JavaScript还提供了许多数据结构，如数组、对象等。这些数据结构之间的转换同样重要。

数组与对象的转换：相辅相成，缺一不可

数组和对象是JavaScript中最常用的两种数据结构。数组中的元素可以是任何类型，对象中的属性可以是任何类型。

数组转对象：

const arr = [1, 2, 3];
const obj = Object.assign({}, arr); // obj 为 {0: 1, 1: 2, 2: 3}

对象转数组：

const obj = {a: 1, b: 2, c: 3};
const arr = Object.values(obj); // arr 为 [1, 2, 3]

JSON与对象：携手并进，数据交互的桥梁

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。JSON与对象之间的转换非常简单。

JSON转对象：

const json = '{"name": "John", "age": 30}';
const obj = JSON.parse(json); // obj 为 {name: "John", age: 30}

对象转JSON：

const obj = {name: "John", age: 30};
const json = JSON.stringify(obj); // json 为 '{"name": "John", "age": 30}'

破茧而出，拓展转换的边界

数据类型转换的魅力不仅限于基本类型和数据结构，它还广泛应用于其他领域。

函数与字符串：妙笔生花，代码随心而动

函数可以转换为字符串，字符串也可以转换为函数。

函数转字符串：

const func = function() {
  console.log("Hello world");
};
const str = func.toString(); // str 为 "function () {\n  console.log("Hello world");\n}"

字符串转函数：

const str = "function () {\n  console.log("Hello world");\n}";
const func = new Function(str); // func 为 function() { console.log("Hello world"); }

正则表达式与字符串：如鱼得水，匹配的艺术

正则表达式可以转换为字符串，字符串也可以转换为正则表达式。

正则表达式转字符串：

const regex = /Hello world/;
const str = regex.toString(); // str 为 "/Hello world/"

字符串转正则表达式：

const str = "/Hello world/";
const regex = new RegExp(str); // regex 为 /Hello world/

化繁为简，结语

数据类型转换是编程语言中一项基本且重要的操作。通过理解和熟练掌握数据类型转换，你可以轻松地在不同类型之间转换数据，从而编写出更加灵活和健壮的代码。