Konversi di JavaScript: Cara - Tipe Data dan Jenisnya

Number() diubah menjadi Number, String() diubah menjadi String, Boolean() diubah menjadi Boolean.

Section Artikel

1 Tipe Data JavaScript
2 Operator typeof
3 Tipe Data dari typeof
4 Properti konstruktor
5 Tipe Konversi JavaScript
6 Mengonversi Angka menjadi String
7 Mengonversi Boolean menjadi String
8 Mengubah Tanggal menjadi String
9 Mengonversi String ke Angka
10 Operator Unary +
11 Mengonversi Boolean menjadi Angka
12 Mengubah Tanggal menjadi Angka
13 Jenis Konversi Otomatis
14 Konversi String Otomatis
15 Tabel Tipe Konversi JavaScript

Tipe Data JavaScript

Di JavaScript ada 5 tipe data berbeda yang dapat berisi nilai, yaitu:

string
number
boolean
object
function

Ada 6 jenis objek:

Object
Date
Array
String
Number
Boolean

Dan 2 tipe data yang tidak bisa berisi nilai, yaitu:

null
undefined

Operator typeof

Kita dapat menggunakan operator typeof untuk menemukan tipe data pada variabel JavaScript.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Operator typeof</h2>

<p> Operator typeof mengembalikan tipe variabel, objek, fungsi atau ekspresi. </p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
  typeof "john" + "<br>" +
  typeof 3.14 + "<br>" +
  typeof NaN + "<br>" +
  typeof false + "<br>" +
  typeof [1,2,3,4] + "<br>" +
  typeof {name:'john', age:34} + "<br>" +
  typeof new Date() + "<br>" +
  typeof function () {} + "<br>" +
  typeof myCar + "<br>" +
  typeof null;
</script>

</body>
</html>

Harap diperhatikan bahwa:

Tipe data NaN adalah angka
Tipe data dari sebuah array adalah objek
Tipe data sebuah tanggal adalah objek
Tipe data null adalah objek
Tipe data dari variabel tidak terdefinisi undefined*
Tipe data variabel yang belum diberi nilai juga undefined *

Kita tidak dapat menggunakan operator typeof untuk menentukan apakah objek JavaScript adalah array atau tanggal.

Tipe Data dari typeof

Typeofoperator bukanlah variabel. Typeof operator adalah sebuah operator. Operator (+ – * /) tidak memiliki tipe data apa pun.

Tapi, operator typeof selalu mengembalikan string (berisi tipe operand).

Properti konstruktor

Properti konstruktor mengembalikan fungsi konstruktor untuk semua variabel JavaScript.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Properti konstruktor</h2>

<p> Properti konstruktor mengembalikan fungsi konstruktor untuk variabel atau
objek. </p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
  "john".constructor + "<br>" +
  (3.14).constructor + "<br>" +
  false.constructor + "<br>" +
  [1,2,3,4].constructor + "<br>" +
  {name:'john', age:34}.constructor + "<br>" +
  new Date().constructor + "<br>" +
  function () {}.constructor;
</script>

</body>
</html>

Anda dapat memeriksa properti konstruktor untuk mengetahui apakah suatu objek adalah Array (berisi kata “Array”).

Comtoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array</h2>

<p> Fungsi isArray () "homemade" ini mengembalikan nilai true saat digunakan pada array: </p>
<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>

</body>
</html>

Atau bahkan penggunaan konstruktor yang lebih sederhana, yaitu dapat digunakan untuk memeriksa apakah objek tersebut adalah fungsi Array:

<!DOCTYPE html>
<html>
<body>

<h2>Object Array JavaScript</h2>
<p> Fungsi isArray () "homemade" ini mengembalikan nilai true saat digunakan pada array: </p>
<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
  return myArray.constructor === Array;
}
</script>

</body>
</html>

Anda dapat memeriksa properti konstruktor untuk mengetahui apakah suatu objek adalah Tanggal atau berisi kata “Tanggal”:

<!DOCTYPE html>
<html>
<body>

<h2>Object Date JavaScript</h2>
<p>This "home made" isDate() function returns true when used on an date:</p>

<p id="demo"></p>

<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);

function isDate(myDate) {
  return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>

</body>
</html>

Atau bahkan lebih sederhana, properti konsturktor dapat memeriksa apakah objek tersebut adalah fungsi Tanggal:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date Object</h2>
<p>This "home made" isDate() function returns true when used on an date:</p>

<p id="demo"></p>

<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);

function isDate(myDate) {
  return myDate.constructor === Date;
}
</script>

</body>
</html>

Tipe Konversi JavaScript

Variabel JavaScript dapat diubah menjadi variabel baru dan tipe data lain, caranya:

Dengan menggunakan fungsi JavaScript
Secara otomatis diubah oleh JavaScript itu sendiri

Mengonversi Angka menjadi String

Metode global String() dapat digunakan untuk mengonversi angka menjadi string.

Method ini dapat digunakan pada semua jenis angka, literal, variabel, atau ekspresi.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Method String() JavaScript </h2>

<p>Metode global String() dapat digunakan untuk mengonversi angka menjadi string.</p>

<p id="demo"></p>

<script>
var x = 123;
document.getElementById("demo").innerHTML =
  String(x) + "<br>" +
  String(123) + "<br>" +
  String(100 + 23);
</script>
</body>
</html>

Metode Angka toString() melakukan hal yang sama.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Method Number JavaScript</h2>

<p>Metode toString () mengonversi angka menjadi string. </p>

<p id="demo"></p>

<script>
var x = 123;
document.getElementById("demo").innerHTML =
  x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
</script>

</body>
</html>

Method	Deskiripsi
toExponential()	Mengembalikan string, dengan angka dibulatkan dan ditulis menggunakan notasi eksponensial.
toFixed()	Mengembalikan string, dengan angka dibulatkan dan ditulis dengan jumlah desimal tertentu.
toPrecision()	Mengembalikan string, dengan angka yang ditulis dengan panjang tertentu

Mengonversi Boolean menjadi String

Metode global String() dapat mengonversi boolean menjadi string.

String(false)      // returns "false"
String(true)       // returns "true"

Dengan metode boolean toString() dapat melakukan hal yang sama.

false.toString()   // returns "false"
true.toString()    // returns "true"

Mengubah Tanggal menjadi String

Metode global String() dapat mengonversi tanggal menjadi string.

String(Date())

Metode Tanggal toString() juga melakukan hal yang sama.

Contoh:

Date().toString()

Method	Description
getDate()	Mengambil hari sebagai angka (1-31)
getDay()	Mengambil hari kerja sebagai nomor (0-6)
getFullYear()	Mengambil tahun empat digit (yyyy)
getHours()	Mengambil jam (0-23)
getMilliseconds()	Mengambil milidetik (0-999)
getMinutes()	Mengambil menit (0-59)
getMonth()	Mengambil bulan (0-11)
getSeconds()	Mengambil detik (0-59)
getTime()	Mengambil waktu (milidetik sejak 1 Januari 1970)

Mengonversi String ke Angka

Metode global Number () dapat mengubah string menjadi angka.

String yang berisi angka (seperti “3.14”) diubah menjadi angka (seperti 3.14).

String kosong diubah menjadi 0.

Ada pula yang dikonversi ke NaN (Bukan Angka).

Number("3.14")    // returns 3.14
Number(" ")       // returns 0
Number("")        // returns 0
Number("99 88")   // returns NaN

Method	Deskripsi
parseFloat()	Mengurai string dan mengembalikan angka floating point
parseInt()	Mengurai string dan mengembalikan integer

Operator Unary +

Operator unary + dapat digunakan untuk mengonversi variabel menjadi angka.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p> Operator typeof mengembalikan tipe variabel atau ekspresi. </p>
<button onclick="myFunction()">cobalah</button>

<p id="demo"></p>

<script>
function myFunction() {
  var y = "5";
  var x = + y;
  document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
}
</script>

</body>
</html>

Jika variabel tidak dapat dikonversi, tetap akan menjadi angka, tetapi dengan nilai NaN (Bukan Angka):

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p> Operator typeof mengembalikan tipe variabel atau ekspresi. </p>

<button onclick="myFunction()">cobalah</button>

<p id="demo"></p>

<script>
function myFunction() {
  var y = "John";
  var x = + y;
  document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
}
</script>

</body>
</html>

Mengonversi Boolean menjadi Angka

Metode global Number() juga dapat mengubah boolean menjadi angka.

Number(false)     // returns 0
Number(true)      // returns 1

Mengubah Tanggal menjadi Angka

Metode global Number() dapat digunakan untuk mengubah tanggal menjadi angka.

d = new Date();
Number(d)          // returns 1404568027739

Metode tanggal getTime () melakukan hal yang sama.

d = new Date();
d.getTime()        // returns 1404568027739

Jenis Konversi Otomatis

Saat JavaScript mencoba untuk beroperasi pada tipe data yang “salah”, JavaScript akan mencoba untuk mengubah nilai menjadi tipe yang “benar”.

Hasilnya tidak selalu seperti yang diharapkan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = [];
document.getElementById("demo").innerHTML =
(5 + null) + "<br>"  +
("5" + null) + "<br>" +
("5" + 2) + "<br>" +
("5" - 2) + "<br>" +
("5" * "2") + "<br>" +
("5" / "2") + "<br>"
</script>

</body>
</html>

Konversi String Otomatis

JavaScript secara otomatis memanggil fungsi toString() variabel ketika kita mencoba untuk “mengeluarkan” sebuah objek atau variabel:

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString converts to "[object Object]"
// if myVar = [1,2,3,4]       // toString converts to "1,2,3,4"
// if myVar = new Date()      // toString converts to "Fri Jul 18 2014 09:08:55 GMT+0200"

Angka dan boolean juga dikonversi, tetapi ini tidak terlalu terlihat:

// if myVar = 123             // toString converts to "123"
// if myVar = true            // toString converts to "true"
// if myVar = false           // toString converts to "false"

Tabel Tipe Konversi JavaScript

Tabel ini menunjukkan hasil konversi nilai JavaScript yang berbeda menjadi Angka, String, dan Boolean:

Nilai asli	Dikonversi ke Angka	Dikonversi menjadi String	Dikonversi ke Boolean
false	0	“false”	false
true	1	“true”	true
0	0	“0”	false
1	1	“1”	true
“0”	0	“0”	true
“000”	0	“000”	true
“1”	1	“1”	true
NaN	NaN	“NaN”	false
Infinity	Infinity	“Infinity”	true
-Infinity	-Infinity	“-Infinity”	true
“”	0	“”	false
“20”	20	“20”	true
“twenty”	NaN	“twenty”	true
[ ]	0	“”	true
[20]	20	“20”	true
[10,20]	NaN	“10,20”	true
[“twenty”]	NaN	“twenty”	true
[“ten”,”twenty”]	NaN	“ten,twenty”	true
function(){}	NaN	“function(){}”	true
{ }	NaN	“[object Object]”	true
null	0	“null”	false
undefined	NaN	“undefined”	false

Nilai dalam tanda kutip menunjukkan nilai string.

Nilai yang di Bold menunjukkan nilai (beberapa) yang mungkin tidak diharapkan oleh programmer.

javascript

Konversi di JavaScript: Cara – Tipe Data dan Jenisnya

Tipe Data JavaScript

Operator typeof

Tipe Data dari typeof

Properti konstruktor

Tipe Konversi JavaScript

Mengonversi Angka menjadi String

Mengonversi Boolean menjadi String

Mengubah Tanggal menjadi String

Mengonversi String ke Angka

Operator Unary +

Mengonversi Boolean menjadi Angka

Mengubah Tanggal menjadi Angka

Jenis Konversi Otomatis

Konversi String Otomatis

Tabel Tipe Konversi JavaScript

TikTok Akan Memberi Tahu Notifikasi Penghapusan Video Anda

Arduino #2: Dasar Pemrograman Arduino

You may also like