hujung hadapan web
tutorial js
Bagaimana untuk menggunakan literal rentetan templat dalam ECMAScript 6?
Bagaimana untuk menggunakan literal rentetan templat dalam ECMAScript 6?
在 JavaScript 的 ES6 版本中，引入了文字。 JavaScript 包含对象文字、数组文字、数字文字、RegExp 文字等。此外，它还包含字符串文字。
字符串文字允许我们创建不带任何反斜杠字符的多行字符串，在引号中添加任何单词或句子，以及在字符串之间添加变量和数学表达式。
语法
用户可以按照以下语法在 ECMAScript 6 中使用模板字符串文字。
let string = `This is template literal string!`;
在上面的语法中，我们使用反引号 (``) 来创建模板文字字符串。
示例 1（多行字符串）
在下面的示例中，我们使用模板文字字符串来创建多行字符串。每当我们创建带引号的字符串时，我们都需要使用“
”字符来创建新行，但是使用字符串文字，我们可以通过在新行中写入字符串来实现。
在 string1 中，新行是通过在新行中写入字符串来创建的，而在 string2 中，我们使用“
”字符来创建新行。用户可以观察输出中的 string1 和 string2，它们看起来是相同的。
let string1 = `This is first line. This is the second line. This is the third line. This is the fourth line.`; console.log(string1); // added character to create a multiline string. let string2 = "Welcome on the TutorialsPoint!"; console.log(string2);
示例 2（字符串中的引号）
我们可以使用模板字符串文字在字符串内添加引号。当我们创建带有双引号的字符串时，我们只能为该字符串添加单引号，而当我们创建带有单引号的字符串时，我们也只能为该字符串添加双引号。
我们使用字符串文字在 stringQuote 变量的字符串中添加了单引号。
<html>
<body>
<h2>Using the <i>template string literals</i> to add quotes in the string.</h2>
<div id = "output"></div>
</body>
<script>
var output = document.getElementById('output');
let stringQuotes = `This is a 'template string literals' with a quote.`;
output.innerHTML += stringQuotes + "<br/>";
let string1 = "This is 'similar to template string literals'." + "<br/>";
output.innerHTML += string1;
</script>
</html>
示例 3（字符串中的变量）
在下面的示例中，我们在字符串中完成了变量替换。一般来说，要在字符串中使用变量，我们需要使用“+”运算符并连接多个字符串，但模板字符串文字允许我们直接在字符串中添加变量。我们可以在 ${} 表达式中添加变量。
在variableStr变量的值中，我们插入了name、job和timePeriod变量。
<html>
<body>
<h2>Using the <i>template string literals </i> to add variables in the string.</h2>
<div id = "output"> </div>
</body>
<script>
var output = document.getElementById('output');
let name = "Shubham";
let job = "Content writer";
let timePeriod = "1 Year";
let variableStr = `Using template string literals :- ${name} is a ${job} at TutorialsPoint from last ${timePeriod}.`;
output.innerHTML += variableStr + "<br/>";
let string = "Using Quotes :- " + name + " is a " + job + " at TutorialsPoint from last " + timePeriod + ". ";
output.innerHTML += string + "<br/>";
</script>
</html>
示例 4（字符串中的表达式）
在此示例中，我们将使用模板字符串文字在字符串中添加数学表达式。在 sumString 中，我们在 ${} 内添加了数学表达式。用户可以看到我们如何在字符串中对 num1 和 num2 求和。
此外，我们还对 string2 中的 2 个值进行了乘法运算。
<html>
<body>
<h2>Using the <i> template string literals </i> to add expression in the string.</h2>
<div id = "output"> </div>
</body>
<script>
var output = document.getElementById('output');
let num1 = 10;
let num2 = 40;
let sumString = `The sum of ${num1} and ${num2} is ${num1 + num2}`;
output.innerHTML += sumString + "<br>";
let string2 = `The multiplication of 20 and 5 is ${20 * 5}`;
output.innerHTML += string2 + "<br>";
</script>
</html>
示例 5（字符串中的 HTML）
我们可以使用模板字符串文字创建一行 HTML 并将其添加到网页中。在此示例中，我们使用字符串文字创建了 HTML 列表，并使用 的innerHTML 属性在网页中添加行 HTML。
<html>
<body>
<h2>Using the <i>template string literals</i> to add HTML to the document.</h2>
<div id = "output"> </div>
</body>
<script>
var output = document.getElementById('output');
let HTMLString = `<ul> <li> One </li> <li> Two </li> <li> Three </li> <li> Four </li> <li> Five </li> </ul>`;
output.innerHTML = HTMLString;
</script>
</html>
用户学会了在 JavaScript 中使用模板字符串文字。我们已经了解了如何创建多行字符串、变量和表达式替换、添加引号以及使用模板字符串文字创建行 HTML。
Atas ialah kandungan terperinci Bagaimana untuk menggunakan literal rentetan templat dalam ECMAScript 6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript?
Apr 04, 2025 pm 05:09 PM
Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...
Demystifying JavaScript: Apa yang berlaku dan mengapa penting
Apr 09, 2025 am 12:07 AM
JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza?
Apr 04, 2025 pm 05:12 PM
Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...
Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido?
atau:
Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido?
Apr 04, 2025 pm 05:36 PM
Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...
TypeScript untuk pemula, Bahagian 2: Jenis Data Asas
Mar 19, 2025 am 09:10 AM
Sebaik sahaja anda telah menguasai tutorial TypeScript peringkat kemasukan, anda harus dapat menulis kod anda sendiri dalam IDE yang menyokong TypeScript dan menyusunnya ke dalam JavaScript. Tutorial ini akan menyelam ke dalam pelbagai jenis data dalam TypeScript. JavaScript mempunyai tujuh jenis data: null, undefined, boolean, nombor, rentetan, simbol (diperkenalkan oleh ES6) dan objek. Typescript mentakrifkan lebih banyak jenis atas dasar ini, dan tutorial ini akan meliputi semuanya secara terperinci. Jenis data null Seperti JavaScript, Null dalam TypeScript
Bolehkah PowerPoint menjalankan JavaScript?
Apr 01, 2025 pm 05:17 PM
JavaScript boleh dijalankan di PowerPoint, dan boleh dilaksanakan dengan memanggil fail JavaScript luaran atau membenamkan fail HTML melalui VBA. 1. Untuk menggunakan VBA untuk memanggil fail JavaScript, anda perlu mendayakan makro dan mempunyai pengetahuan pengaturcaraan VBA. 2. Benamkan fail HTML yang mengandungi JavaScript, yang mudah dan mudah digunakan tetapi tertakluk kepada sekatan keselamatan. Kelebihan termasuk fungsi lanjutan dan fleksibiliti, sementara kelemahan melibatkan keselamatan, keserasian dan kerumitan. Dalam praktiknya, perhatian harus dibayar kepada keselamatan, keserasian, prestasi dan pengalaman pengguna.
