String pada JavaScript digunakan untuk menyimpan dan memanipulasi tipe data yang berjenis teks.
String pada JavaScript adalah karakter yang berjumlah nol atau lebih yang ditulis di dalam tanda kutip.
Contoh:
<!DOCTYPE html> <html> <body> <h2>String di JavaScript</h2> <p id="demo"></p> <script> var x = "John Doe"; // String ditulis di dalam tanda kutip document.getElementById("demo").innerHTML = x; </script> </body> </html>
Kita juga dapat menggunakan tanda kutip tunggal atau ganda.
Contoh:
<!DOCTYPE html> <html> <body> <h2>String JavaScript</h2> <p>String ditulis di dalam tanda kutip. Anda dapat menggunakan tanda kutip tunggal atau ganda</p> <p id="demo"></p> <script> var carName1 = "Volvo XC60"; // Double quotes var carName2 = 'Volvo XC60'; // Single quotes document.getElementById("demo").innerHTML = carName1 + " " + carName2; </script> </body> </html>
Anda dapat menggunakan tanda kutip di dalam tanda kutip string, selama tidak menyamai dengan tanda kutip yang mengelilingi string.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Anda dapat menggunakan tanda kutip di dalam tanda kutip string, selama tidak menyamai dengan tanda kutip yang mengelilingi string.</p>
<p id="demo"></p>
<script>
var answer1 = "Tidak apa-apa";
var answer2 = "Dia bernama 'Johnny'";
var answer3 = 'Dia bernama "Johnny"';
document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3;
</script>
</body>
</html>
Section Artikel
Panjang String
Untuk menemukan panjang string, gunakan properti built-in length.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>Properti String JavaScript</h2>
<p>Properti lenght mengembalikan nilai panjang string:</p>
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
document.getElementById("demo").innerHTML = sln;
</script>
</body>
</html>
Escape Character
Karena string harus ditulis dalam tanda kutip, JavaScript akan salah memahami string ini:
var x = "We are the so-called "Vikings" from the north.";
String tersebut akan dipotong menjadi “We are the so-called”.
Solusi untuk menghindari masalah ini, adalah dengan menggunakan karakter escape backslash.
Karakter escape backslash () mengubah karakter khusus menjadi karakter string.
Lihat pada tabel berikut:
| Code | Result | Description |
|---|---|---|
| \’ | ‘ | Kutip tunggal |
| \” | “ | Kutip ganda |
| \\ | \ | Backslash |
Urutan menyisipkan \” tanda kutip ganda dalam string.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Urutan menyisipkan \" tanda kutip ganda dalam string.</p>
<p id="demo"></p>
<script>
var x = "We are the so-called \"Vikings\" from the north.";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Urutan menyisipkan \’ kutipan tunggal dalam string.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Urutan menyisipkan \' kutipan tunggal dalam string.</p>
<p id="demo"></p>
<script>
var x = 'It\'s alright.';
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Urutan menyisipkan \\ backslash dalam string:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Urutan menyisipkan \\ backslash dalam string:</p>
<p id="demo"></p>
<script>
var x = "The character \\ is called backslash.";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Enam urutan escape lain yang valid pada JavaScript:
| Kode | Hasil |
|---|---|
| \b | Backspace |
| \f | Form Feed |
| \n | New Line |
| \r | Carriage Return |
| \t | Horizontal Tabulator |
| \v | Vertical Tabulator |
Memecah Baris Kode yang Panjang
Agar mudah dibaca programmer sering kali menghindari baris kode yang lebih panjang dari 80 karakter.
Jika statement pada JavaScript tidak cukup dalam satu baris, tempat terbaik untuk memecahnya adalah setelah operator.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statement</h2>
<p>
Tempat terbaik untuk memecahkan baris kode adalah setelah operator atau koma.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>
</body>
</html>
Kita juga dapat memecah baris kode dalam string teks dengan menggunakan backslash.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>
Kita juga dapat memecah baris kode dalam string teks dengan menggunakan backslash.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>
</body>
</html>
Metode penggunaan blackslah ( \ ) bukanlah metode yang sering digunakan. Hal ini dikarenakan backslash tidak di dukung secara universal.
Beberapa browser tidak mengizinkan spasi di belakang karakter .
Cara yang lebih aman untuk memecah string, adalah dengan menggunakan penambahan string.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Cara yang lebih aman untuk memecah string, adalah dengan menggunakan penambahan string.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>
</body>
</html>
Kita tidak dapat mememecah baris kode dengan backslash.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p id="demo">Kita tidak dapat mememecah baris kode dengan \.</p>
<script>
document.getElementById("demo").innerHTML = \
"Hello Dolly.";
</script>
</body>
</html>
String Bisa Menjadi Objek
Biasanya, string JavaScript adalah nilai primitif dan dibuat dari tipe data literal, contoh:
var firstName = “John”;
Tetapi string juga dapat didefinisikan sebagai objek dengan menggunakan keyword new, contoh:
var firstName = new String (“John”);
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = "John"; // x adalah string
var y = new String("John"); // y adalah object
document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>
</body>
</html>
Jangan membuat varabel string sebagai objek. Hal ini akan memperlambat kecepatan eksekusi.
Kata kunci new akan memperumit kode. Dan dapat menghasilkan beberapa hasil yang tidak diharapkan.
Contoh:
Saat menggunakan operator ==, string yang sama adalah sama:
<!DOCTYPE html>
<html>
<body>
<h2>Jangan Membuat String sebagai objek.</h2>
<p>String dan objek tidak dapat dibandingkan dengan aman.</p>
<p id="demo"></p>
<script>
var x = "John"; // x is a string
var y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
Saat menggunakan operator ===, string yang sama tidak sama, karena operator === mengharapkan persamaan dalam tipe dan nilai.
<!DOCTYPE html>
<html>
<body>
<h2>Jangan Membuat String sebagai objek.</h2>
<p>String dan objek tidak dapat dibandingkan dengan aman.</p>
<p id="demo"></p>
<script>
var x = "John"; // x is a string
var y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
Atau bahkan lebih buruk. Objek tidak dapat dibandingkan:
<!DOCTYPE html>
<html>
<body>
<h2>Jangan Membuat String sebagai objek.</h2>
<p>String dan objek tidak dapat dibandingkan dengan aman.</p>
<p id="demo"></p>
<script>
var x = new String("John"); // x is an object
var y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Jangan Membuat String sebagai objek.</h2>
<p>String dan objek tidak dapat dibandingkan dengan aman.</p>
<p id="demo"></p>
<script>
var x = new String("John"); // x is an object
var y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
Perhatikan perbedaan antara (x == y) dan (x === y).
Membandingkan dua objek JavaScript akan selalu menghasilkan nilai yang salah.
