在 TypeScript 中连接一个字符串和一个数字

Concatenate a String and a Number in TypeScript

使用加法运算符连接 TypeScript 中的字符串和数字，例如str + num. 结果的类型为string，因此请确保分配给它的值的类型是string或者是包含字符串类型的联合，例如string | number。

索引.ts


const num = 5;
const str = '0';

// ✅ Using addition operator
const result1 = str + num;
console.log(result1); // 👉️ "05"

// ✅ using template literal
const result2 = `${str}${num}`;
console.log(result2); // 👉️ "05"

第一个示例演示如何使用
加法运算符 (+)连接字符串和数字。

将字符串连接到数字的结果是一个类型为的值
string。

索引.ts


const num = 5;
const str = '0';

// 👇️ const result1: string
const result1 = str + num;

如果您尝试将结果分配给期望不同类型的值，则会出现错误。

索引.ts


const num = 5;
const str = '0';

// 👇️ let result1: number
let result1 = 50;

// ⛔️ Error: Type 'string' is not
// assignable to type 'number'.ts(2322)
result1 = str + num;

该result1变量的类型为number，因此当我们无法将字符串和数字连接的结果分配给它时，因为它的类型为
string。

如果您处于类似情况，请使用涵盖了numberand
类型的联合string类型。

索引.ts


const num = 5;
const str = '0';

// 👇️ let result1: number | string
let result1: number | string = 50;

result1 = str + num;

console.log(result1); // 👉️ "05"

在编写 TypeScript 代码时，我们必须确保赋值的左侧和右侧的值具有兼容的类型，否则类型检查器会抛出错误。

您还可以使用模板文字将字符串连接到数字
。

索引.ts


const num = 5;
const str = '0';

const result2 = `${str}${num}`;
console.log(result2); // 👉️ "05"

美元符号和花括号语法${}允许我们计算表达式。

您可以想象str和num占位符被替换为实际值。

模板文字基本上是一个字符串，它允许我们插入变量并通过美元符号花括号语法使用逻辑。

索引.ts


const name = 'James';

console.log(`Hello ${name}`); // 👉️ "Hello James"

请注意，模板文字使用反引号 “，而不是单引号。

模板文字的类型始终是 a string，因此您必须确保只将它分配给兼容类型的变量。

–