Cara menggunakan number to string javascript

Number merupakan salah satu tipe data JavaScript yang perlu kita pahami secara mendalam, tipe data ini akan sering kita gunakan saat membuat aplikasi.

Misalnya, jika membuat aplikasi toko online, harga produk tentu perlu kita simpan atau perlakukan sebagai angka.

Tapi, tipe data angka di JavaScript memiliki perilaku dan beberapa keterbatas, ini semua perlu diketahui agar kita bisa menghindari perilaku tak terduga.

Jangan khawatir, Anda tidak perlu menjadi ahli matematika.

Berikut topik yang akan kita bahas seputar tipe data angka:

Apa Itu Number?

Number adalah tipe data primitif yang merepresentasikan data numerik atau angka entah itu positif maupun negatif.

Tipe data angka di JavaScript adalah format biner 64-bit double-precision, mengikuti standar internasional IEEE 754, sama seperti

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

Itu artinya angka di JavaScript dapat mewakili nilai pecahan dan selalu disimpan sebagai floating point double-precission, namun dengan beberapa batasan.

Tidak seperti bahasa pemrograman yang lain termasuk Java dan C#, tipe data number di banyak bahasa pemrograman lain biasanya memiliki beberapa jenis, diantaranya integer, short, long, floating-point dan sebagainya.

Tapi di JavaScript, tipe data angka disimpan sebagai floating point tepatnya double.

Ini akan kita bahas di bawah.

Cara Membuat Data Number

Sama seperti string, kita bisa membuat data angka menggunakan sintaks literal, fungsi constructor

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

const a = '19';
const b = Number(a);

console.log(typeof a); // string
console.log(typeof b); // number

Angka yang dibuat dengan objek Number (

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

Tapi, method dan properti yang ada di dalam objek

const a = '19';
const b = Number(a);

console.log(typeof a); // string
console.log(typeof b); // number

Oleh karena itu, jangan heran jika kita tiba-tiba bisa mengakses method atau properti tertentu pada angka primitif.

Misalnya,

const a = '19';
const b = Number(a);

console.log(typeof a); // string
console.log(typeof b); // number

const a = '19';
const b = Number(a);

console.log(typeof a); // string
console.log(typeof b); // number

const a = '19';
const b = Number(a);

console.log(typeof a); // string
console.log(typeof b); // number

Anda disarankan membuat angka menggunakan sintaks literal.

Number Literal

Untuk membuat angka menggunakan sintaks literal, kita bisa menulisnya secara langsung, mirip seperti string, tapi tanpa tanda kutip.

Contoh:

const a = 19;

console.log(a); // 19
console.log(typeof a); // number
console.log(a instanceof Number); // false

const a = 19; const b = Number(19); console.log(a === b); // true :: 19 console.log(typeof a === typeof b); // true :: number console.log(a instanceof Number === b instanceof Number); // true :: false 3

Angka bisa dibuat menggunakan fungsi

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

Caranya, cukup masukkan angka atau angka string yang ingin dikonversi ke dalam kurung lengkung.

Contoh:

const b = Number(19);

console.log(b); // 19
console.log(typeof b); // number
console.log(b instanceof Number); // false

Ini sama persis seperti angka yang dibuat dengan sintaks literal:

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

Kapan menggunakan fungsi

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

const a = '19';
const b = Number(a);

console.log(typeof a); // string
console.log(typeof b); // number

const a = 19; const b = Number(19); console.log(a === b); // true :: 19 console.log(typeof a === typeof b); // true :: number console.log(a instanceof Number === b instanceof Number); // true :: false 4

Jangan gunakan metode ini karena dapat menghasilkan perilaku tak terduga dan memperlambat eksekusi kode.

Membuat data angka menggunakan metode ini menghasilkan nilai non-primitif atau objek.

Contoh:

const a = new Number(1);

console.log(a); // Number {1}
console.log(typeof a); // object
console.log(a instanceof Number); // true

Oleh karena itu, membandingkan angka yang dibuat menggunakan sintaks literal atau fungsi

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

const a = 19;
const b = new Number(19);

console.log(a === b); // false

Nilai Khusus: const a = 19; const b = Number(19); console.log(a === b); // true :: 19 console.log(typeof a === typeof b); // true :: number console.log(a instanceof Number === b instanceof Number); // true :: false 5, const a = 19; const b = Number(19); console.log(a === b); // true :: 19 console.log(typeof a === typeof b); // true :: number console.log(a instanceof Number === b instanceof Number); // true :: false 6, dan const a = 19; const b = Number(19); console.log(a === b); // true :: 19 console.log(typeof a === typeof b); // true :: number console.log(a instanceof Number === b instanceof Number); // true :: false 7

Selain angka (0123456789), di JavaScript, angka memiliki tiga nilai khusus.

Saat membuat aplikasi, ketiga nilai ini sangat jarang atau bahkan tidak pernah diinisialisasi ke variabel secara eksplisit

Tapi ketahuilah, nilai-nilai itu ada di JavaScript.

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

Contoh:

1 / 0; // Infinity

typeof Infinity; // number

Sedangkan

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

Contoh:

-1 / 0; // -Infinity

typeof -Infinity; // number

Bagaimana dengan

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

Contoh:

'hello' * 1; // NaN
NaN / 2; // NaN

typeof NaN; // number

Kalau dipikir-pikir tidak masuk akal melakukan operasi matematika ke data teks, oleh karena itu JavaScript mengembalikan nilai yang tidak dapat direpresentasikan (

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

Batas Aman Bilangan Bulat

Seperti yang sudah kita bahas sebelumnya, tipe data angka di JavaScript sebetulnya disimpan sebagai floating point double-precission.

Oleh karena itu memiliki beberapa keterbatasan seperti halnya bahasa pemrograman lain yang memiliki tipe data angka floating point double.

JavaScript hanya mampu mewakiliki bilangan bulat dengan aman antara

const a = 19;
const b = new Number(19);

console.log(a === b); // false

const a = 19;
const b = new Number(19);

console.log(a === b); // false

• Minimum:

  const a = 19;
  const b = new Number(19);
  
  console.log(a === b); // false
  

  1 adalah

  const a = 19;
  const b = new Number(19);
  
  console.log(a === b); // false
  

  4.
• Maksimum:

  const a = 19;
  const b = new Number(19);
  
  console.log(a === b); // false
  

  2 adalah

  const a = 19;
  const b = new Number(19);
  
  console.log(a === b); // false
  

  6.

Aman di sini mengacu pada kemampuan JavaScript mewakiliki bilangan bulat dengan tepat dan akurat.

Di luar rentang tersebut, JavaScript dapat menafsirkan bilangan bulat secara salah.

Untuk mengetahui batas aman minimum dan maksimum, kita bisa menggunakan properti statis

const a = 19;
const b = new Number(19);

console.log(a === b); // false

const a = 19;
const b = new Number(19);

console.log(a === b); // false

const a = '19';
const b = Number(a);

console.log(typeof a); // string
console.log(typeof b); // number

Number.MIN_SAFE_INTEGER; // -9007199254740991 === -(2 ** 53 - 1)
Number.MAX_SAFE_INTEGER; // 9007199254740991 === 2 ** 53 - 1

Setelah mengetahui batasnya, mari kita buktikan:

const b = Number(19);

console.log(b); // 19
console.log(typeof b); // number
console.log(b instanceof Number); // false

Perhatikan kode di atas, kita melakukan operasi matematika yang menghasilkan nilai melebihi batas aman nilai maksimum.

Oleh karena itu, terkadang menghasilkan nilai benar terkadang salah.

Perilaku ini juga berlaku jika kita melakukan operasi matematika yang menghasilkan nilai lebih kecil dari batas aman nilai minimum.

Jangankan nilai hasil operasi matematika, ditulis langsung saja mengembalikan nilai yang salah:

const b = Number(19);

console.log(b); // 19
console.log(typeof b); // number
console.log(b instanceof Number); // false

Jika Anda memerlukan angka diluar rentang

1 / 0; // Infinity

typeof Infinity; // number

1 / 0; // Infinity

typeof Infinity; // number

1 / 0; // Infinity

typeof Infinity; // number

Nilai Numerik yang Dapat Direpresentasikan

JavaScript juga memiliki batas nilai maksimum yang dapat direpresentasikan, kita bisa memeriksanya menggunkaan properti statis

1 / 0; // Infinity

typeof Infinity; // number

const a = '19';
const b = Number(a);

console.log(typeof a); // string
console.log(typeof b); // number

Nilai yang lebih besar dari

1 / 0; // Infinity

typeof Infinity; // number

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

const b = Number(19);

console.log(b); // 19
console.log(typeof b); // number
console.log(b instanceof Number); // false

Sedangkan angka positif terkecil yang dapat direpresentasikan, bisa dicek menggunkaan properti statis

1 / 0; // Infinity

typeof Infinity; // number

const a = '19';
const b = Number(a);

console.log(typeof a); // string
console.log(typeof b); // number

const b = Number(19);

console.log(b); // 19
console.log(typeof b); // number
console.log(b instanceof Number); // false

1 / 0; // Infinity

typeof Infinity; // number

Operasi Matematika Bilangan Pecahan Tidak Selalu Akurat

Saat melakukan operasi matematika pada bilangan pecahan, JavaScript tidak selalu mengembalikan nilai yang akurat.

const b = Number(19);

console.log(b); // 19
console.log(typeof b); // number
console.log(b instanceof Number); // false

Untuk mengatasi masalah ini biasanya kedua operan dikalikan dengan 10 kemudian dijumlahkan, hasilnya dibagi 10.

const b = Number(19);

console.log(b); // 19
console.log(typeof b); // number
console.log(b instanceof Number); // false

Akurasi dan jumlah maksimum pecahan (angka setelah titik) yang dikembalikan sekitar 17, lebih dari itu tidak dikembalikan.

Perilaku Penjumlahan Angka dengan String

Seperti yang telah kita pelajari, operator

-1 / 0; // -Infinity

typeof -Infinity; // number

Menjumlahkan angka dengan angka hasilnya akan menjadi angka, ini dianggap sebagai penjumlahan:

const b = Number(19);

console.log(b); // 19
console.log(typeof b); // number
console.log(b instanceof Number); // false

Menjumlahkan string dengan string hasilnya akan menjadi string, ini dianggap sebagai penggabungan string:

const b = Number(19);

console.log(b); // 19
console.log(typeof b); // number
console.log(b instanceof Number); // false

Menjumlahkan angka dengan angka di dalam string hasilnya menjadi string, ini dianggap sebagai penggabungan string, begitu pula sebaliknya (angka di dalam string dengan angka):

const b = Number(19);

console.log(b); // 19
console.log(typeof b); // number
console.log(b instanceof Number); // false

Bagaimana dengan ini:

const b = Number(19);

console.log(b); // 19
console.log(typeof b); // number
console.log(b instanceof Number); // false

Nilai yang dikembalikan adalah string

-1 / 0; // -Infinity

typeof -Infinity; // number

-1 / 0; // -Infinity

typeof -Infinity; // number

Pertama,

-1 / 0; // -Infinity

typeof -Infinity; // number

-1 / 0; // -Infinity

typeof -Infinity; // number

Kemudian

-1 / 0; // -Infinity

typeof -Infinity; // number

Oleh karena itu hasilnya string

-1 / 0; // -Infinity

typeof -Infinity; // number

Tapi, bagaimana dengan yang ini:

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

Hasilnya string

-1 / 0; // -Infinity

typeof -Infinity; // number

-1 / 0; // -Infinity

typeof -Infinity; // number

Pertama,

-1 / 0; // -Infinity

typeof -Infinity; // number

'hello' * 1; // NaN
NaN / 2; // NaN

typeof NaN; // number

'hello' * 1; // NaN
NaN / 2; // NaN

typeof NaN; // number

-1 / 0; // -Infinity

typeof -Infinity; // number

Jadi, selama angka dijumlahkan dengan string, JavaScript akan menafsirkan panggabungan string sehingga mengembalikan nilai string.

Perilaku ini hanya berlaku untuk operator

-1 / 0; // -Infinity

typeof -Infinity; // number

Perilaku Operasi Matematika, Angka dengan Angka di Dalam String

Berbeda dengan operator aritmatika penjumlahan (

-1 / 0; // -Infinity

typeof -Infinity; // number

Jika kita melakukan operasi matematika menggunakan operator perkalian, pengurangan, pembagian, modulus, atau eksponensial (pangkat), angka di dalam string akan dianggap sebagai angka.

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false

Perilaku ini hanya terjadi jika salah satu operan adalah angka di dalam string. Jika berupa karakter, mengembalikan nilai

const a = 19;
const b = Number(19);

console.log(a === b); // true :: 19
console.log(typeof a === typeof b); // true :: number
console.log(a instanceof Number === b instanceof Number); // true :: false