Penggunaan karakter backtick (`) dalam JavaScript

Dalam JavaScript, backtick ^† tampaknya berfungsi sama dengan kutipan tunggal. Misalnya, saya bisa menggunakan backtick untuk mendefinisikan string seperti ini:

var s = `abc`;

Apakah ada cara di mana perilaku backtick sebenarnya berbeda dari kutipan tunggal?

^{† Perhatikan bahwa di antara programmer, "backtick" adalah satu nama untuk apa yang lebih umum disebut aksen kubur . Pemrogram juga terkadang menggunakan nama alternatif "backquote" dan "backgrave". Juga, pada Stack Overflow dan di tempat lain, ejaan umum lainnya untuk "backtick" adalah "back-tick" dan "back tick".}

Ini adalah fitur yang disebut templat literals .

Mereka disebut "templat string" dalam edisi sebelumnya dari spesifikasi ECMAScript 2015.

Literal templat didukung oleh Firefox 34, Chrome 41, dan Edge 12 ke atas, tetapi tidak oleh Internet Explorer.

• Contoh: http://tc39wiki.calculist.org/es6/template-strings/
• Spesifikasi resmi: Spesifikasi Bahasa ECMAScript 2015, 12.2.9 Komponen Templat Literal Literal (agak kering)

Templat literal dapat digunakan untuk mewakili string multi-garis dan dapat menggunakan "interpolasi" untuk memasukkan variabel:

var a = 123, str = `---
   a is: ${a}
---`;
console.log(str);

Keluaran:

---
   a is: 123
---

Yang lebih penting, mereka dapat berisi tidak hanya nama variabel, tetapi semua ekspresi JavaScript:

var a = 3, b = 3.1415;

console.log(`PI is nearly ${Math.max(a, b)}`);

ECMAScript 6 hadir dengan tipe baru string literal, menggunakan backtick sebagai pembatas. Literal ini memang memungkinkan ekspresi interpolasi string dasar untuk tertanam, yang kemudian secara otomatis diuraikan dan dievaluasi.

let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };

let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
  "<p>I am " + person.age + " old</p>\n" +
  "<strong>\"" + person.greeting + "\" is what I usually say</strong>";

let newHtmlStr =
 `<p>My name is ${person.name},</p>
  <p>I am ${person.age} old</p>
  <p>"${person.greeting}" is what I usually say</strong>`;

console.log(usualHtmlStr);
console.log(newHtmlStr);

Seperti yang Anda lihat, kami menggunakan `serangkaian karakter, yang ditafsirkan sebagai string literal, tetapi setiap ekspresi bentuk ${..}diuraikan dan dievaluasi dengan segera.

Satu manfaat yang sangat bagus dari literal string yang diinterpolasikan adalah mereka diizinkan untuk dipecah menjadi beberapa baris:

var Actor = {"name": "RajiniKanth"};

var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log(text);
// Now is the time for all good men
// to come to the aid of their
// country!

Ekspresi Interpolasi

Ekspresi valid apa pun diizinkan muncul di ${..}dalam string literal yang diinterpolasi, termasuk panggilan fungsi, panggilan ekspresi fungsi inline, dan bahkan literal string yang diinterpolasi lainnya!

function upper(s) {
  return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper("warm")} welcome
to all of you ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!

Di sini, `${who}s`string literal interpolasi bagian dalam adalah kenyamanan sedikit lebih baik bagi kita ketika menggabungkan whovariabel dengan "s"string, sebagai lawan dari who + "s". Juga untuk menyimpan catatan adalah string literal yang diinterpolasi hanya dibatasi secara leksikal di mana ia muncul, tidak secara dinamis dicakup dengan cara apa pun:

function foo(str) {
  var name = "foo";
  console.log(str);
}
function bar() {
  var name = "bar";
  foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"

Menggunakan templat literal untuk HTML jelas lebih mudah dibaca dengan mengurangi gangguan.

Cara biasa yang sederhana:

'<div class="' + className + '">' +
  '<p>' + content + '</p>' +
  '<a href="' + link + '">Let\'s go</a>'
'</div>';

Dengan ECMAScript 6:

`<div class="${className}">
  <p>${content}</p>
  <a href="${link}">Let's go</a>
</div>`

• String Anda dapat menjangkau beberapa baris.
• Anda tidak harus lari dari karakter kutipan.
• Anda dapat menghindari pengelompokan seperti: '">'
• Anda tidak harus menggunakan operator plus.

Literal Templat Tagged

Kami juga dapat menandai string template, ketika string template ditandai, literal dan substitusi dilewatkan ke fungsi yang mengembalikan nilai yang dihasilkan.

function myTaggedLiteral(strings) {
  console.log(strings);
}

myTaggedLiteral`test`; //["test"]

function myTaggedLiteral(strings, value, value2) {
  console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5

Kita dapat menggunakan operator spread di sini untuk memberikan beberapa nilai. Argumen pertama — kami menyebutnya string — adalah array dari semua string polos (hal-hal di antara setiap ekspresi yang diinterpolasi).

Kami kemudian mengumpulkan semua argumen berikutnya ke dalam array disebut nilai-nilai menggunakan ... gather/rest operator, meskipun Anda tentu saja telah meninggalkan mereka sebagai parameter bernama individu mengikuti string parameter seperti yang kami lakukan di atas ( value1, value2, dll).

function myTaggedLiteral(strings, ...values) {
  console.log(strings);
  console.log(values);
}

let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5

Argumen yang dikumpulkan ke dalam array nilai kami adalah hasil dari ekspresi interpolasi yang sudah dievaluasi yang ditemukan dalam string literal. Literal string yang ditandai adalah seperti langkah pemrosesan setelah interpolasi dievaluasi, tetapi sebelum nilai string akhir dikompilasi, memungkinkan Anda lebih mengontrol menghasilkan string dari literal. Mari kita lihat contoh membuat templat yang dapat digunakan kembali.

const Actor = {
  name: "RajiniKanth",
  store: "Landmark"
}

const ActorTemplate = templater`<article>
  <h3>${'name'} is a Actor</h3>
  <p>You can find his movies at ${'store'}.</p>

</article>`;

function templater(strings, ...keys) {
  return function(data) {
    let temp = strings.slice();
    keys.forEach((key, i) => {
      temp[i] = temp[i] + data[key];
    });
    return temp.join('');
  }
};

const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);

String mentah

Fungsi tag kami menerima argumen pertama yang kami sebut string, yang merupakan array. Tapi ada sedikit tambahan data yang disertakan: versi mentah dari semua string yang belum diproses. Anda dapat mengakses nilai-nilai string mentah menggunakan .rawproperti, seperti ini:

function showraw(strings, ...values) {
  console.log(strings);
  console.log(strings.raw);
}
showraw`Hello\nWorld`;

Seperti yang Anda lihat, versi mentah dari string mempertahankan \nurutan yang diloloskan , sementara versi yang diproses dari string memperlakukannya seperti baris baru nyata yang tidak terhindar . ECMAScript 6 dilengkapi dengan built-in fungsi yang dapat digunakan sebagai tag literal string yang: String.raw(..). Ini hanya melewati versi mentah dari string:

console.log(`Hello\nWorld`);
/* "Hello
World" */

console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"

Backticks ( `) digunakan untuk mendefinisikan literal templat. Literal templat adalah fitur baru dalam ECMAScript 6 untuk mempermudah pengerjaan string.

Fitur:

• kita dapat menginterpolasi segala jenis ekspresi dalam literal templat.
• Mereka bisa multi-line.

Catatan: kita dapat dengan mudah menggunakan tanda kutip tunggal ( ') dan tanda kutip ganda ( ") di dalam backticks ( `).

Contoh:

var nameStr = `I'm "Rohit" Jindal`;

Untuk menginterpolasi variabel atau ekspresi kita dapat menggunakan ${expression}notasi untuk itu.

var name = 'Rohit Jindal';
var text = `My name is ${name}`;
console.log(text); // My name is Rohit Jindal

String multi-garis berarti Anda tidak perlu lagi menggunakan \njalur baru.

Contoh:

const name = 'Rohit';
console.log(`Hello ${name}!
How are you?`);

Keluaran:

Hello Rohit!
How are you?

Backticks menyertakan literal templat, yang sebelumnya dikenal sebagai string templat. Literal template adalah literal string yang memungkinkan ekspresi tertanam dan fitur interpolasi string.

Templat literal memiliki ekspresi yang tertanam di placeholder, dilambangkan dengan tanda dolar dan tanda kurung keriting di sekitar ekspresi, yaitu ${expression} . Placeholder / ekspresi bisa diteruskan ke fungsi. Fungsi default hanya menyatukan string.

Untuk menghindari backtick, letakkan backslash di depannya:

`\`` === '`'; => true

Gunakan backticks untuk lebih mudah menulis string multi-line:

console.log(`string text line 1
string text line 2`);

atau

console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

vs vanilla JavaScript:

console.log('string text line 1\n' +
'string text line 2');

atau

console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');

Escape sequence:

• Unicode lolos dimulai \u, misalnya\u00A9
• Titik kode Unicode lolos ditunjukkan oleh \u{}, misalnya\u{2F804}
• Heksadesimal dimulai dengan \x, misalnya\xA9
• Oktal literal escape dimulai oleh \dan (a) digit, misalnya\251

Ringkasan:

Backticks dalam JavaScript adalah fitur yang diperkenalkan dalam ECMAScript 6 // ECMAScript 2015 untuk membuat string dinamis yang mudah. Fitur ECMAScript 6 ini juga dinamai template string literal . Ini menawarkan keuntungan berikut jika dibandingkan dengan string normal:

• Dalam Templat string, linebreak diizinkan dan dengan demikian bisa multiline. Literal string normal (dideklarasikan dengan ''atau"" ) tidak diizinkan memiliki linebreak.
• Kita dapat dengan mudah menginterpolasi nilai variabel ke string dengan ${myVariable}sintaks.

Contoh:

const name = 'Willem';
const age = 26;

const story = `
  My name is: ${name}
  And I'm: ${age} years old
`;

console.log(story);

Kompatibilitas browser:

Literal string templat didukung secara native oleh semua vendor browser utama (kecuali Internet Explorer). Jadi cukup menghemat untuk digunakan dalam kode produksi Anda. Daftar kompatibilitas browser yang lebih terperinci dapat ditemukan di sini .

Terlepas dari interpolasi string, Anda juga dapat memanggil fungsi menggunakan tanda centang kembali.

var sayHello = function () {
    console.log('Hello', arguments);
}

// To call this function using ``

sayHello`some args`; // Check console for the output

// Or
sayHello`
    some args
`;

Periksa komponen gaya . Mereka banyak menggunakannya.

Bagian baiknya adalah kita dapat membuat matematika dasar secara langsung:

let nuts = 7

more.innerHTML = `

<h2>You collected ${nuts} nuts so far!

<hr>

Double it, get ${nuts + nuts} nuts!!

`

<div id="more"></div>

Itu menjadi sangat berguna dalam fungsi pabrik:

function nuts(it){
  return `
    You have ${it} nuts! <br>
    Cosinus of your nuts: ${Math.cos(it)} <br>
    Triple nuts: ${3 * it} <br>
    Your nuts encoded in BASE64:<br> ${btoa(it)}
  `
}

nut.oninput = (function(){
  out.innerHTML = nuts(nut.value)
})

<h3>NUTS CALCULATOR
<input type="number" id="nut">

<div id="out"></div>