edubun
Bahasa Indonesia

String dan template literal

"5" + 3 menghasilkan "53", bukan 8. Kalau salah satu sisi + adalah string, JavaScript menggabungkan teks alih-alih menjumlahkan angka.

Teks dalam program

Nama, pesan, alamat, kata sandi, dan seluruh halaman web adalah teks, dan JavaScript menyimpan teks sebagai string. String adalah deretan karakter di antara tanda kutip. JavaScript menerima tiga jenis tanda kutip: kutip ganda "seperti ini", kutip tunggal 'seperti ini', dan backtick `seperti ini`. Dua yang pertama berperilaku sama. Backtick membuat template literal, yang punya kemampuan tambahan seperti dijelaskan di bawah.

Kalau teksmu mengandung satu jenis tanda kutip, bungkus dengan jenis yang lain: "It's late" berhasil karena apostrof bukan kutip ganda. Kamu juga bisa menaruh garis miring terbalik sebelum tanda kutip untuk menyatakan "yang ini bagian dari teks": 'It\'s late'. Garis miring terbalik yang diikuti n, ditulis \n, berarti pindah baris di dalam string.

Panjang dan posisi

Setiap string tahu berapa banyak karakternya: "JavaScript".length adalah 10. Setiap karakter juga punya posisi, yang disebut indeks, dan hitungannya dimulai dari 0, bukan 1. Jadi dalam "JavaScript", indeks 0 adalah J, indeks 4 adalah S, dan indeks terakhir adalah 9, satu kurangnya dari panjang string. Kamu membaca satu karakter dengan kurung siku: word[0]. Mulai dari 0 terasa aneh pada awalnya, tetapi kebanyakan bahasa pemrograman menghitung dengan cara ini, dan kamu akan menjumpainya lagi pada array.

const word = "JavaScript";
console.log(word.length);                // 10
console.log(word[0]);                    // J
console.log(word[word.length - 1]);      // t

Metode string yang berguna

String punya alat bawaan yang disebut metode, yang dipanggil dengan titik setelah string. toUpperCase() dan toLowerCase() mengembalikan salinan dalam huruf besar atau huruf kecil. includes("Script") menjawab true atau false, tergantung apakah teks itu ada di dalamnya. slice(0, 4) mengembalikan karakter dari indeks 0 sampai sebelum indeks 4 (indeks 4 tidak ikut), yang dalam "JavaScript" adalah "Java". trim() membuang spasi di kedua ujung, praktis untuk merapikan sesuatu yang diketik orang. Tidak satu pun metode ini mengubah string aslinya. String dalam JavaScript tidak bisa diubah di tempat; metode selalu mengembalikan string baru.

Menggabungkan string dengan +

Operator + menyambung string ujung ke ujung, yang disebut penggabungan (konkatenasi). "Hello, " + "Mina" menghasilkan "Hello, Mina". Spasi tidak ditambahkan otomatis, jadi taruh sendiri di dalam tanda kutip. Inilah jebakan dari pembuka tadi: kalau salah satu sisi + adalah string, JavaScript mengubah sisi lainnya menjadi string lalu menggabungkannya. "5" + 3 adalah "53". Operator aritmetika lain tidak menggabungkan teks, jadi "5" * 2 mengubah "5" menjadi angka dan menghasilkan 10. Untuk mengubah string berisi angka menjadi number sungguhan, pakai Number("5").

Template literal

Menyusun kalimat dengan + cepat menjadi berantakan: name + " is " + age + " years old." butuh spasi dan tanda kutip yang cermat. Template literal, yang ditulis dengan backtick, memungkinkanmu memasukkan nilai langsung ke dalam teks dengan ${ }. Apa pun yang ada di dalam kurung kurawal dievaluasi sebagai ekspresi, lalu hasilnya ditaruh di dalam string. Template literal juga bisa terdiri atas beberapa baris.

const name = "Mina";
const age = 14;
console.log(`${name} is ${age} years old.`);   // Mina is 14 years old.
console.log(`Next year: ${age + 1}`);           // Next year: 15

Contoh soal. Label toko perlu berbunyi "3 apples cost 4.5". Dengan const n = 3, price = 1.5;, template `${n} apples cost ${n * price}` menyelesaikannya dalam satu baris, dan perkaliannya terjadi di dalam kurung kurawal.

Backtick mengapit teks, tanda dolar dan kurung kurawal mengapit setiap nilai: `Hi ${name}`

stringTeks di antara tanda kutip atau backtick
indeksPosisi sebuah karakter, dihitung dari 0
.lengthBanyaknya karakter dalam string
penggabunganMenggabungkan string dengan +
template literalString backtick dengan tempat nilai ${ }
metodeAlat yang dipanggil dengan titik: word.toUpperCase()
slice(a, b)Karakter dari indeks a sampai sebelum b (b tidak ikut)
escape \nPindah baris di dalam string
  1. Apa yang dicetak kode ini?
    console.log("5" + 3);
  2. Apa yang dicetak kode ini?
    console.log("5" * 3);
  3. Apa yang dicetak kode ini?
    console.log("cat".length);
  4. Apa yang dicetak kode ini?
    const s = "Seoul";
    console.log(s[1]);
  5. Apa yang dicetak kode ini?
    console.log("JavaScript".slice(4, 10));
  6. Apa yang dicetak kode ini?
    const a = 2;
    const b = 3;
    console.log(`${a} + ${b} = ${a + b}`);
    • 2 + 3 = 5
    • ${a} + ${b} = ${a + b}
    • 2 + 3 = 23
  7. Apa yang dicetak kode ini?
    console.log("Hi" + " " + "there".toUpperCase());
  8. Apa yang dicetak kode ini?
    console.log("banana".includes("nan"));
    • true
    • false
  9. Apa yang dicetak kode ini?
    console.log(1 + 2 + "3");
  10. Apa yang dicetak kode ini?
    console.log(Number("7") + 1);
  11. Berapa indeks terakhir dari string yang panjangnya 6?
Poin penting
  • String memakai tanda kutip "ganda", 'tunggal', atau `backtick`.
  • Indeks dimulai dari 0; indeks terakhir adalah length - 1.
  • Metode seperti toUpperCase, includes, slice, dan trim mengembalikan string baru.
  • Kalau salah satu sisi + adalah string, + menggabungkan teks.
  • Template literal: `teks ${ekspresi} teks`.
Sumber kursus ini (2)
  • MDN Web Docs, JavaScript Guide (developer.mozilla.org/en-US/docs/Web/JavaScript/Guide, chapters Introduction, Grammar and types, Control flow, Loops and iteration, Functions, Expressions and operators, Numbers and strings, Indexed collections, Working with objects; checked 2026-10-17)
  • Ecma International, ECMA-262 ECMAScript 2026 Language Specification, 17th edition, June 2026 (tc39.es/ecma262 and ecma-international.org/publications-and-standards/standards/ecma-262, checked 2026-10-17)

Diperiksa: 2026-10-17