String Template JavaScript

Arti serupa:

  • Template Literals
  • Template Strings
  • String Templates

Template LiteralGunakan back-ticks (`) daripada tanda kutip ("

Contoh

let text = `Hello World!`;

Coba sendiri

Tanda kutip di dalam string

Dengan menggunakanTemplate Literal,Anda dapat menggunakan tanda kutip tunggal dan ganda di dalam string:

Contoh

let text = `He's often called "Johnny"`;

Coba sendiri

String Multi-baris

Template LiteralMemungkinkan string multi-baris:

Contoh

let text =
The quick
brown fox
melompat
the lazy dog`;

Coba sendiri

Interpolasi

Template LiteralMenyediakan metode yang mudah untuk menempatkan variabel dan ekspresi di dalam string.

Metode ini disebut interpolasi string (string interpolation).

Sintaks

${...}

Penggantian Variabel

Template LiteralMemungkinkan variabel di dalam string:

Contoh

let firstName = "Bill";
let lastName = "Gates";
let text = `Welcome ${firstName}, ${lastName}!`;

Coba sendiri

Penggantian variabel dengan nilai nyata disebutInterpolasi String.

Penggantian Ekspresi

Template LiteralMemungkinkan ekspresi di dalam string:

Contoh

let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

Coba sendiri

Penggantian otomatis ekspresi dengan nilai nyata disebut interpolasi string.

Template HTML

Contoh

let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}
html += `</ul>`;

Coba sendiri

Dukungan Browser

Internet Explorer tidak mendukungTemplate Literal.

Versi browser yang mendukung template literal pertama adalah:

Chrome IE Firefox Safari Opera
Chrome 41 Edge 13 Firefox 34 Safari 10 Opera 29
Maret 2015 November 2015 Desember 2014 September 2016 April 2015

Referensi Lengkap String

Untuk referensi penuh, kunjungi situs lengkap kami Panduan Lengkap String JavaScript.

Panduan Lengkap String JavaScript termasuk deskripsi dan contoh semua properti dan metode.