Template literals · Template literal
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Halaman ini memerlukan browser terbaru (dengan dukungan SharedArrayBuffer). Silakan perbarui Chrome, Edge, Firefox, atau Safari ke versi terbaru.
English
A cleaner way to build strings
- Wrap a string in backticks
`and you can drop values straight in with${...}. - This is a template literal — much tidier than joining with lots of
+.
Bahasa Indonesia
Cara lebih bersih untuk membangun string
- Bungkus string dengan backticks
`dan Anda bisa memasukkan nilai langsung dengan${...}. - Ini adalah template literal — jauh lebih rapi daripada menggabungkan dengan banyak
+.
let name = "Ada";
let age = 15;
console.log(`${name} is ${age}`); // → Ada is 15
English
Any expression fits inside ${ }
- Whatever you write inside
${...}is worked out first, then dropped into the string.
Bahasa Indonesia
Ekspresi apa pun muat di dalam ${ }
- Apa pun yang Anda tulis di dalam
${...}akan dihitung terlebih dahulu, lalu dimasukkan ke dalam string.
let a = 3;
let b = 4;
console.log(`${a} + ${b} = ${a + b}`); // → 3 + 4 = 7
English
Same string, two ways
+and a template literal can build exactly the same text.- In backticks, spaces and punctuation stay where you type them, so a missing space is easy to see.
Bahasa Indonesia
String yang sama, dua cara
+dan template literal dapat membangun teks yang persis sama.- Di dalam backticks, spasi dan tanda baca tetap di tempat Anda mengetiknya, sehingga spasi yang hilang mudah terlihat.
let item = "pen";
let price = 3;
console.log("A " + item + " costs " + price + " yuan."); // → A pen costs 3 yuan.
console.log(`A ${item} costs ${price} yuan.`); // → A pen costs 3 yuan.
English
Watch out
- Backticks
`are not the same as quotes'or".${...}only works inside backticks. - Bonus: a backtick string can span several lines — handy for longer messages.
Bahasa Indonesia
Hati-hati
- Backticks
`bukan sama dengan tanda kutip'atau".${...}hanya berfungsi di dalam backticks. - Bonus: string backtick dapat mencakup beberapa baris — berguna untuk pesan yang lebih panjang.
English
Common mistakes
- Template literals use backticks and
${...}:`Hi ${name}`, not quotes. - Inside
${...}you can put any expression.
Bahasa Indonesia
Kesalahan umum
- Template literal menggunakan tanda petik dua balik dan
${...}:`Hi ${name}`, bukan tanda kutip biasa. - Di dalam
${...}Anda dapat memasukkan ekspresi apa pun.
English
Now you try
- Use backticks and
${...}. - Press Check answer to test it.
Bahasa Indonesia
Sekarang Anda coba
- Gunakan backticks dan
${...}. - Tekan Cek jawaban untuk mengujinya.
let name = "Sam". Use a template literal (backticks) to log Hello, Sam!. · let name = "Sam". Gunakan template literal (backtick) untuk log Hello, Sam!.
Click Run to see the output here. · Klik Jalankan untuk melihat output di sini.
a is 3 and b is 4. Use a template literal to log 3 + 4 = 7 (put a + b inside ${ }). · a ialah 3 dan b ialah 4. Gunakan petikan templat untuk mencatatkan 3 + 4 = 7 (letakkan a + b di dalam ${ }).
Click Run to see the output here. · Klik Jalankan untuk melihat output di sini.
Use a template literal to log Total: 10, working out the 10 as 5 * 2 inside ${ }. · Gunakan template literal untuk log Total: 10, menghitung 10 sebagai 5 * 2 di dalam ${ }.
Click Run to see the output here. · Klik Jalankan untuk melihat output di sini.