Chuyển string sang number trong TypeScript (và ngược lại)

Để chuyển một chuỗi thành số trong TypeScript, hãy gọi Number(text). Kết quả có kiểu number, và là NaN khi chuỗi không phải số hợp lệ. Với chuỗi có ký tự thừa ở cuối, như "42px", hãy dùng parseInt(text, 10) hoặc parseFloat(text).

const input: string = "42";

const a = Number(input);       // 42
const b = parseInt(input, 10); // 42 (whole numbers)
const c = parseFloat("3.75");  // 3.75
const d = +input;              // 42 (unary plus, same as Number)

console.log(a + 1, b + 1, c + 1, d + 1); // 43 43 4.75 43

// And back: number to string
const text: string = String(a);
console.log(text, text.length); // 42 2

Cả bốn cách chuyển đổi đều trả về kiểu number. TypeScript không biết chuỗi có hợp lệ hay không; một chuỗi không hợp lệ vẫn cho ra một number, với giá trị là NaN.

Vì sao bạn phải chuyển đổi

Trường của form, tham số URL, biến môi trường và nội dung tệp đều đến dưới dạng chuỗi. TypeScript không cho bạn dùng chuỗi ở nơi cần một số:

// This does not compile: a string is not a number.
const quantity: string = "3";
const total: number = quantity * 10;
console.log(total);

index.ts(3,23): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

Phép tính với -, * và / trên một chuỗi là lỗi. + thì được phép nhưng sẽ nối chuỗi, nên "3" + 10 là chuỗi "310", đó là lý do phải chuyển đổi trước: Number(quantity) * 10.

Type assertion cũng không giúp được gì. quantity as number bị từ chối (TS2352), và ép qua as unknown as number chỉ làm trình biên dịch im lặng: lúc chạy, giá trị vẫn là chuỗi.

Number, parseInt, parseFloat và dấu + một ngôi

Bốn hàm cho kết quả giống nhau với đầu vào sạch và khác nhau ở mọi trường hợp còn lại. Bảng này là đầu ra thật của từng hàm khi chạy trên Node:

Các quy tắc đằng sau bảng này:

• Number và dấu + một ngôi hoàn toàn giống nhau. Chúng chuyển đổi cả chuỗi sau khi bỏ khoảng trắng hai đầu, hiểu được 1e3 và số hệ 16 dạng 0x, và trả về NaN nếu còn sót lại bất cứ ký tự nào. Chuỗi rỗng hoặc chỉ có khoảng trắng thành 0.
• parseInt và parseFloat đọc từ đầu chuỗi và dừng ở ký tự đầu tiên không dùng được, nên "42px" và "1,000" cho ra một phần của số. Chuỗi rỗng là NaN.
• parseInt bỏ phần thập phân và không hiểu số mũ: "1e3" dừng ở chữ e.
• Dấu phân cách số (12_000) hợp lệ trong mã nguồn, nhưng không hợp lệ trong chuỗi.

Number là lựa chọn chặt chẽ hơn để kiểm tra đầu vào. parseInt và parseFloat hợp với chuỗi thật sự có kèm đơn vị hoặc hậu tố, như kích thước trong CSS.

Xử lý đầu vào không hợp lệ: NaN

NaN có kiểu number, nên trình biên dịch không bao giờ cảnh báo về nó. Bạn phải tự kiểm tra kết quả bằng Number.isNaN hoặc Number.isFinite:

function toNumber(text: string): number | undefined {
    if (text.trim() === "") return undefined; // Number("") would be 0
    const n = Number(text);
    return Number.isFinite(n) ? n : undefined;
}

for (const s of ["12.5", "", "abc", "7 ", "Infinity"]) {
    console.log(JSON.stringify(s), toNumber(s));
}

const age = toNumber("30");
if (age !== undefined) {
    console.log(age + 1); // age is number here
}

Trả về number | undefined biến trường hợp thất bại thành một phần của kiểu, nên mọi nơi gọi hàm đều phải xử lý nó trước khi tính toán. Number.isFinite cũng loại Infinity, giá trị mà Number("Infinity") vẫn vui vẻ trả về.

Tránh dùng hàm toàn cục isNaN(x): nó chuyển đổi đối số trước, nên trong JavaScript isNaN("abc") là true. Khai báo của TypeScript chỉ chấp nhận number, nên truyền một chuỗi là lỗi TS2345, một gợi ý để dùng Number.isNaN trên giá trị đã chuyển đổi.

Chuỗi sang số nguyên

Luôn truyền cho parseInt đối số thứ hai, tức cơ số: 10 với chuỗi số thập phân. Đối số này không bắt buộc, nhưng nó thể hiện rõ ý định và quan trọng với các hệ cơ số khác. Để lấy số nguyên từ một chuỗi số thập phân, hãy chuyển đổi rồi làm tròn một cách tường minh.

console.log(parseInt("0042", 10)); // 42
console.log(parseInt("ff", 16));   // 255
console.log(parseInt("1010", 2));  // 10

const price = Number("19.99");
console.log(Math.trunc(price), Math.round(price), Math.floor(price)); // 19 20 19

console.log(Number.isInteger(Number("7")));   // true
console.log(Number.isInteger(Number("7.5"))); // false

console.log(BigInt("9007199254740993")); // 9007199254740993n

parseInt cần một chuỗi: parseInt(12.7) là lỗi biên dịch (TS2345), và điều này có ích, vì trong JavaScript parseInt trên một số sẽ chuyển số đó thành chuỗi trước rồi cho kết quả sai với những giá trị như 0.0000005 (nó trả về 5). Hãy dùng Math.trunc cho số. Với số nguyên vượt quá Number.MAX_SAFE_INTEGER, BigInt(text) đọc được trọn giá trị (và ném ra SyntaxError với chuỗi không hợp lệ thay vì trả về NaN).

Số sang chuỗi

String(n), n.toString() hay `${n}` đều chuyển một số thành dạng chuỗi ngắn nhất của nó. Các phương thức định dạng cho bạn nhiều quyền kiểm soát hơn:

const n = 1234.5678;

console.log(String(n));            // 1234.5678
console.log(n.toString());         // 1234.5678
console.log(`${n}`);               // 1234.5678
console.log(n.toFixed(2));         // 1234.57
console.log(n.toPrecision(3));     // 1.23e+3
console.log(n.toLocaleString("en-US")); // 1,234.568
console.log((255).toString(16));   // ff
console.log((5).toString().padStart(3, "0")); // 005

const label: string = n.toFixed(1); // every method here returns string
console.log(label);                 // 1234.6

toFixed làm tròn giá trị nhị phân, không phải số thập phân bạn đã gõ, nên (1.005).toFixed(2) là "1.00": 1.005 được lưu thành một số nhỏ hơn 1.005 một chút. Với tiền tệ, hãy lưu số tiền dưới dạng số nguyên tính theo xu hoặc định dạng bằng Intl.NumberFormat.

String(n) cũng dùng được với null và undefined (cho ra "null" và "undefined"), trong khi n.toString() sẽ là lỗi biên dịch khi bật strict, vì giá trị có thể không tồn tại.

Tra cứu nhanh