JavaScript - Penukaran Jenis

Hai sana, para pemaju JavaScript yang bersemangat! Hari ini, kita akan melihat dunia yang menarik penukaran jenis dalam JavaScript. Jangan khawatir jika anda baru dalam bidang programming; saya akan memandu anda dalam perjalanan ini secara berperingkat, seperti yang saya lakukan untuk ribuan pelajar sepanjang tahun pengajaran saya. Jadi, ambil secangkir kopi (atau minuman kegemaran anda), dan mari kita mulakan!

Penukaran Jenis dalam JavaScript

Sebelum kita melompat ke hal yang rumit, mari kita memahami apa yang dimaksudkan dengan penukaran jenis. Bayangkan anda ada kotak lego, tetapi beberapa bahagiannyabuat daripada kayu. Untuk membina kastil lego anda, anda perlu menukarkan bahagian kayu itu kepada batu lego. Itu adalah esensi penukaran jenis dalam JavaScript - menukarkan data dari jenis satu ke jenis lain.

Dalam JavaScript, kita ada dua jenis penukaran utama:

1. Penukaran Tertanam (juga dipanggil Type Coercion)
2. Penukaran Eksplisit (juga dipanggil Type Casting)

Mari kita jelajahi setiap jenis ini secara mendalam.

Penukaran Tertanam

Penukaran tertanam berlaku secara automatik ketika JavaScript cuba melakukan operasi pada nilai jenis yang berbeza. Ia seperti JavaScript berkata, "Jangan bimbang, saya ada ini!" dan menukarkan jenis di belakang layar.

Penukaran ke String (Penukaran Tertanam)

JavaScript cukup ramah ketika hendak menukarkan sesuatu ke string. Ia seperti teman yang boleh membuka percakapan dengan siapa saja!

let num = 5;
let str = "The number is: " + num;
console.log(str); // Output: "The number is: 5"
console.log(typeof str); // Output: "string"

Dalam contoh ini, JavaScript secara automatik menukarkan nombor 5 ke string ketika kita menggunakan operator + bersama string. Ia seperti JavaScript menaruh tanda petik di sekeliling nombor bagi kita.

Penukaran ke Nombor (Penukaran Tertanam)

Bila berkenaan dengan nombor, JavaScript cuba membuat sense daripada hal-hal, seperti guru matematik yang cuba membaca tulisan kacau murid.

let str = "10";
let num = str - 5;
console.log(num); // Output: 5
console.log(typeof num); // Output: "number"

Di sini, JavaScript melihat operator - dan fikir, "Aha! Kita membuat matematik!" Jadi ia menukarkan string "10" ke nombor 10 sebelum mengurangkan 5.

Penukaran ke Boolean (Penukaran Tertanam)

JavaScript mempunyai peraturan mudah untuk penukaran ke boolean: nilai tertentu dianggap "benar" dan yang lain "salah". Ia seperti mengurus murid menjadi "hadir" dan "tidak hadir".

if ("Hello") {
console.log("This will run because 'Hello' is truthy");
}

if (0) {
console.log("This won't run because 0 is falsy");
}

Dalam contoh ini, JavaScript secara automatik menukarkan "Hello" ke true dan 0 ke false.

Null ke Nombor (Penukaran Tertanam)

Null adalah pelanggan yang pelik. Bila diubah ke nombor, ia menjadi 0. Ia seperti murid yang tidak menghantar tugasan tetapi masih mendapat nol mata.

let x = null;
console.log(+x); // Output: 0

Operator unar + cuba menukarkan null ke nombor, yang membawa kepada 0.

Undefined dengan Nombor dan Boolean (Penukaran Tertanam)

Undefined adalah lebih pelik lagi. Ia seperti murid yang tidak menghantar tugasan dan bahkan tidak ada di senarai kelas!

let x;
console.log(+x); // Output: NaN (Bukan Nombor)
console.log(Boolean(x)); // Output: false

Bila diubah ke nombor, undefined menjadi NaN. Bila diubah ke boolean, ia menjadi false.

Penukaran Eksplisit

Penukaran eksplisit adalah ketika kita, para pemaju, mengambil kawalan dan memberitahu JavaScript jenis yang kita mahu. Ia seperti menjadi pengarahwayang dan memberitahu aktor-aktor anda betapa jenis peranan yang mereka hendak mainkan.

Penukaran ke String (Penukaran Eksplisit)

Kami ada beberapa method untuk penukaran ke string:

let num = 123;
let str1 = String(num);
let str2 = num.toString();
let str3 = num + "";

console.log(str1, typeof str1); // Output: "123" string
console.log(str2, typeof str2); // Output: "123" string
console.log(str3, typeof str3); // Output: "123" string

Semua method ini mencapai hasil yang sama, tetapi String() dan toString() lebih jelas tentang kehendak kita.

Penukaran ke Nombor (Penukaran Eksplisit)

Untuk penukaran ke nombor, kita ada pilihan yang sama:

let str = "456";
let num1 = Number(str);
let num2 = parseInt(str);
let num3 = +str;

console.log(num1, typeof num1); // Output: 456 number
console.log(num2, typeof num2); // Output: 456 number
console.log(num3, typeof num3); // Output: 456 number

Number() dan parseInt() lebih jelas tentang apa yang kita cuba lakukan, manakala operator unar + adalah singkatan yang digunakan oleh beberapa pengembang.

Penukaran ke Boolean (Penukaran Eksplisit)

Penukaran ke boolean adalah mudah:

let str = "Hello";
let bool1 = Boolean(str);
let bool2 = !!str;

console.log(bool1, typeof bool1); // Output: true boolean
console.log(bool2, typeof bool2); // Output: true boolean

Fungsi Boolean() adalah jelas dan mudah dibaca. Double negasi (!!) adalah singkatan yang digunakan oleh beberapa pengembang, tetapi ia mungkin membingungkan bagi pengguna baru.

Penukaran Tarikh ke String/Nombor

Tarikh adalah kes khas dalam JavaScript. Mereka boleh diubah ke kedua-dua string dan nombor:

let date = new Date();
let dateString = String(date);
let dateNumber = Number(date);

console.log(dateString); // Output: "Mon May 15 2023 12:34:56 GMT+0000 (Coordinated Universal Time)"
console.log(dateNumber); // Output: 1684154096000 (milisecond sejak January 1, 1970)

Mengubah tarikh ke string memberikan kita format yang boleh dibaca manusia, manakala mengubah ke nombor memberikan kita milisecond sejak epok Unix.

Tabel Penukaran dalam JavaScript

Untuk menggabungkan semua method penukaran yang kita telah belajar, ini adalah tabel yang berguna:

Nilai Asal	ke String	ke Nombor	ke Boolean
false	"false"	0	false
true	"true"	1	true
0	"0"	0	false
1	"1"	1	true
"0"	"0"	0	true
"1"	"1"	1	true
NaN	"NaN"	NaN	false
Infinity	"Infinity"	Infinity	true
-Infinity	"-Infinity"	-Infinity	true
""	""	0	false
"20"	"20"	20	true
[ ]	""	0	true
[20]	"20"	20	true
[10,20]	"10,20"	NaN	true
["twenty"]	"twenty"	NaN	true
["ten","twenty"]	"ten,twenty"	NaN	true
function(){}	"function(){}"	NaN	true
{ }	"[object Object]"	NaN	true
null	"null"	0	false
undefined	"undefined"	NaN	false

Dan itu adalah! Kita telah melintasi negeri penukaran jenis JavaScript. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini. Siapa tahu? Anda mungkin bahkan menikmati proses menukarkan batu lego menjadi blok kayu dan kembali lagi!

Selamat coding, para master JavaScript masa depan!

Credits: Image by storyset