JavaScript 和 TypeScript 中的类型转换

Migel Hewage Nimesha 2023年10月12日
  1. JavaScript 中的隐式转换
  2. JavaScript 中的显式转换
  3. TypeScript 中的类型转换
JavaScript 和 TypeScript 中的类型转换

本文将讨论使用不同的 JavaScript 和 TypeScript 方法进行类型转换或类型转换。

在 JavaScript 中执行类型转换有两种方法:隐式和显式。

JavaScript 中的隐式转换

如果 JavaScript 将给定的数据类型识别为错误的,它会自动将其重新转换为正确的类型。这个过程称为隐式转换。

JavaScript 可以通过以下方式进行隐式类型转换。

在 JavaScript 中隐式转换为字符串

如果 + 与数字字符串一起使用,则 JavaScript 通过将数字字符串值与代码的剩余值连接来返回输出。

例子:

let value;

value = '1' + 2;
console.log(value)  // Output "12"

value = '1' + true;
console.log(value)  // Output "1true"

如果剩余的值是数字,JavaScript 会自动将其转换为字符串。

在 JavaScript 中隐式转换为数字

如果数学运算符 -*/ 跟在数字字符串后面,则输出也将是数字。

例子:

let value;

value = '2' - '1';
console.log(value);  // Output 1

value = '2' - 1;
console.log(value);  // Output 1

value = '2' * 1;
console.log(value);  // Output 2

value = '2' / 1;
console.log(value);  // Output 2

在 JavaScript 中将非数字字符串隐式转换为 NaN

如果非数字字符串后跟数学运算符 -*/,则输出将返回为 NaN(非数字)。

例子:

let value;

value = 'hello' - 'world';
console.log(value);  // Output NaN

value = 'Hello' - '2';
console.log(value);  // Output NaN

JavaScript 中布尔值到数字的隐式转换

由于 JavaScript 将 false 视为 0,并将所有非零数字视为 true,因此当需要将 true 更改为数字时,true 将是 1。

例子:

let value;

value = 2 + true;
console.log(value);  // Output 3

value = 2 + false;
console.log(value);  // Output 2

在 JavaScript 中将 null 隐式转换为数字

如果 null 与数字一起使用,它将为 0。

例子:

let value;

value = 2 + null;
console.log(value);  // Output 2

value = 2 - null;
console.log(value);  // Output 4

JavaScript 中 undefinedNaN 的隐式转换

undefined 与数字、布尔值或 null 一起使用时,输出将返回为 NaN

例子:

let value;

value = 2 + undefined;
console.log(value);  // Output NaN

value = true + undefined;
console.log(value);  // Output NaN

value = null + undefined;
console.log(value);  // Output NaN

JavaScript 中的显式转换

在 JavaScript 中,我们可以手动将特定数据类型转换为首选数据类型。这个过程称为显式转换,通过调用一些内置方法来完成。

在 JavaScript 中显式转换为数字

使用 JavaScript 中的 Number() 方法,可以将数字字符串、布尔值 TrueFalsenull 转换为数字类型。true 将被视为 1,而 falsenull 也将被视为 0。

示例 1:

let value;

value = Number('20');
console.log(value);  // Output 20

value = Number(false);
console.log(value);  // Output 0

示例 2:

let value;
value = Number(null);
console.log(value);  // Output 0

let value = Number(' ')
console.log(value);  // Output 0

如果在 Number() 方法中使用了无效字符串,则输出将返回为 NaN

此外,还有其他方法,如 parseInt()parseFloat(),其中字符串被解析并分别作为整数和浮点返回。此外,一元+ 运算符是另一种转换数字的方法。

在 JavaScript 中显式转换为字符串

String()toString() 可以在 JavaScript 中将数据类型转换为字符串。

例子:

let value;

value = String(1 + 2);
console.log(value);  // Output "3"

value = String(null);
console.log(value);  // Output "null"

value = (20).toString();
console.log(value);  // Output "20"

重要的是要注意 String()nullundefined 转换为字符串,但 toString() 会出错。

在 JavaScript 中显式转换为布尔值

JavaScript 将所有 undefinednull0NaN'' 视为 false,而所有其他值都视为 true

例子:

let value;
value = Boolean('');
console.log(value);  // Output false

value = Boolean(undefined);
console.log(value);  // Output false

value = Boolean(null);
console.log(value);  // Output false

value = Boolean(NaN);
console.log(value);  // Output false

TypeScript 中的类型转换

在 TypeScript 中使用 as 关键字进行类型转换

当使用 as 关键字时,它通知编译器将实体视为另一种类型,而不是编译器认为的类型。因此,as 关键字在 TypeScript 中执行类型断言

语法:

let a: typeA;
let b = a as typeB;

在 TypeScript 中使用 <> 运算符进行类型转换

此外,我们还可以使用运算符 <> 在 TypeScript 中进行类型转换。

语法:

let a: typeA;
let b = <typeB>a;
Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

相关文章 - TypeScript Casting