String ke Number di TypeScript (dan Number ke String)

Untuk mengubah string menjadi number di TypeScript, panggil Number(text). Hasilnya bertipe number, dan nilainya NaN kalau teksnya bukan angka yang valid. Untuk teks dengan karakter tambahan di belakang, seperti "42px", pakai parseInt(text, 10) atau 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

Keempat konversi itu mengembalikan tipe number. TypeScript tidak tahu apakah teksnya valid; string yang tidak valid tetap menghasilkan number, yang nilainya NaN.

Kenapa Kamu Harus Mengonversi

Field form, parameter URL, environment variable, dan isi file datang sebagai string. TypeScript tidak mengizinkanmu memakainya di tempat yang mengharapkan number:

// 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.

Aritmetika dengan -, * dan / pada string adalah error. + diperbolehkan tetapi menyambung string, jadi "3" + 10 adalah string "310", itulah sebabnya konversi harus dilakukan lebih dulu: Number(quantity) * 10.

Type assertion juga tidak membantu. quantity as number ditolak (TS2352), dan memaksanya lewat as unknown as number hanya membungkam compiler: nilainya tetap string saat runtime.

Number vs parseInt vs parseFloat vs Unary Plus

Keempat fungsi ini sepakat pada input yang bersih dan berbeda pendapat pada semua input lainnya. Tabel ini adalah output nyata masing-masing di Node:

Aturan di balik tabel ini:

• Number dan unary + identik. Keduanya mengonversi seluruh string setelah memangkas spasi, memahami 1e3 dan hex 0x, dan mengembalikan NaN kalau masih ada sisa karakter. String kosong atau yang hanya berisi spasi menjadi 0.
• parseInt dan parseFloat membaca dari awal dan berhenti di karakter pertama yang tidak bisa dipakai, jadi "42px" dan "1,000" menghasilkan angka sebagian. String kosong menghasilkan NaN.
• parseInt membuang bagian pecahan dan tidak memahami eksponen: "1e3" berhenti di e.
• Pemisah angka (12_000) valid di kode sumber, tetapi tidak di dalam string.

Number adalah pilihan yang lebih ketat untuk memvalidasi input. parseInt dan parseFloat cocok untuk teks yang memang membawa satuan atau akhiran, seperti ukuran CSS.

Menangani Input yang Tidak Valid: NaN

NaN bertipe number, jadi compiler tidak pernah memperingatkanmu tentangnya. Cek hasilnya sendiri, dengan Number.isNaN atau 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
}

Mengembalikan number | undefined menjadikan kegagalan itu bagian dari tipe, jadi setiap pemanggil harus menanganinya sebelum melakukan aritmetika. Number.isFinite juga menolak Infinity, yang dengan senang hati dikembalikan oleh Number("Infinity").

Hindari isNaN(x) global: fungsi ini mengonversi argumennya lebih dulu, jadi isNaN("abc") bernilai true di JavaScript. Deklarasi TypeScript-nya hanya menerima number, jadi mengirim string adalah error TS2345, sebuah petunjuk untuk memakai Number.isNaN pada nilai yang sudah dikonversi.

String ke Integer

Selalu berikan argumen kedua ke parseInt, yaitu radix: 10 untuk teks desimal. Argumen ini opsional, tetapi mendokumentasikan maksudmu dan penting untuk basis lain. Untuk mendapatkan integer dari string desimal, konversi lalu bulatkan secara eksplisit.

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 mengharapkan string: parseInt(12.7) adalah error kompilasi (TS2345), dan itu berguna, karena di JavaScript parseInt pada sebuah number mengubahnya menjadi teks lebih dulu dan memberi jawaban yang salah untuk nilai seperti 0.0000005 (hasilnya 5). Pakai Math.trunc untuk number. Untuk integer di atas Number.MAX_SAFE_INTEGER, BigInt(text) mem-parse nilai lengkapnya (dan melempar SyntaxError pada teks yang tidak valid alih-alih mengembalikan NaN).

Number ke String

String(n), n.toString() maupun `${n}` sama-sama mengubah number menjadi bentuk string terpendeknya. Method pemformatan memberi kendali lebih:

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 membulatkan nilai binernya, bukan desimal yang kamu ketik, jadi (1.005).toFixed(2) adalah "1.00": 1.005 disimpan sebagai nilai yang sedikit lebih kecil dari 1,005. Untuk uang, simpan jumlahnya sebagai sen dalam integer atau format dengan Intl.NumberFormat.

String(n) juga berfungsi pada null dan undefined (menghasilkan "null" dan "undefined"), sedangkan n.toString() akan menjadi error kompilasi dengan strict, karena nilainya mungkin tidak ada.

Referensi Cepat