Anda dapat memanfaatkan Literal Templat dan menggunakan sintaks ini:
`String text ${expression}`
Literal templat terlampir oleh tanda centang-belakang (``) (aksen kubur) alih-alih kutipan ganda atau tunggal.
Fitur ini telah diperkenalkan di ES2015 (ES6).
Contoh
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}.`);
// "Fifteen is 15.
Seberapa rapi itu?
Bonus:
Ini juga memungkinkan untuk string multi-line dalam javascript tanpa melarikan diri, yang bagus untuk template:
return `
<div class="${foo}">
...
</div>
`;
Dukungan browser :
Karena sintaks ini tidak didukung oleh browser lama (kebanyakan Internet Explorer), Anda mungkin ingin menggunakan Babel / Webpack untuk mengubah kode Anda ke ES5 untuk memastikan itu akan berjalan di mana-mana.
Catatan:
Mulai dari IE8 + Anda dapat menggunakan pemformatan string dasar di dalam console.log
:
console.log('%s is %d.', 'Fifteen', 15);
// Fifteen is 15.
"${foo}"
secara harfiah $ {foo}`${foo}`
adalah apa yang sebenarnya Anda inginkanFifteen is ${a + b}.
); tidak berubah secara dinamis. itu selalu menunjukkan Lima Belas adalah 15.Sebelum Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, tidak, itu tidak mungkin di javascript. Anda harus resor ke:
sumber
Sebelum Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, no. Meskipun Anda bisa mencoba sprintf agar JavaScript mencapai separuh jalan:
sumber
baik Anda bisa melakukan ini, tetapi itu bukan esp umum
Anda dapat dengan mudah menulis fungsi yang melakukan ini dengan cerdas jika Anda benar-benar perlu
sumber
Jawaban lengkap, siap digunakan:
Sebut sebagai
Untuk melampirkannya ke String.prototype:
Kemudian gunakan sebagai:
sumber
Anda dapat menggunakan fungsi javascript ini untuk melakukan templating semacam ini. Tidak perlu menyertakan seluruh perpustakaan.
Keluaran :
"I would like to receive email updates from this store FOO BAR BAZ."
Menggunakan fungsi sebagai argumen ke fungsi String.replace () adalah bagian dari spesifikasi ECMAScript v3. Lihat jawaban SO ini untuk lebih jelasnya.
sumber
Jika Anda suka menulis CoffeeScript, Anda dapat melakukannya:
CoffeeScript sebenarnya IS javascript, tetapi dengan sintaks yang jauh lebih baik.
Untuk tinjauan umum tentang CoffeeScript, periksa panduan pemula ini .
sumber
Jika Anda mencoba melakukan interpolasi untuk microtemplating, saya suka Moustache.js untuk tujuan itu.
sumber
Saya menulis paket npm ini stringinject https://www.npmjs.com/package/stringinject yang memungkinkan Anda melakukan hal berikut
yang akan mengganti {0} dan {1} dengan item-item array dan mengembalikan string berikut
atau Anda bisa mengganti placeholder dengan kunci dan nilai objek seperti:
sumber
Saya akan menggunakan tanda centang-kembali ``.
Tetapi jika Anda tidak tahu
name1
kapan Anda membuatnyamsg1
.Contohnya jika
msg1
berasal dari API.Kamu bisa menggunakan :
Itu akan menggantikan
${name2}
nilainya.sumber
Tidak melihat perpustakaan eksternal yang disebutkan di sini, tetapi Lodash memiliki
_.template()
,https://lodash.com/docs/4.17.10#template
Jika Anda sudah menggunakan perpustakaan, ada baiknya memeriksa, dan jika Anda tidak menggunakan Lodash, Anda selalu dapat memilih metode dari npm
npm install lodash.template
sehingga Anda dapat mengurangi biaya overhead.Bentuk paling sederhana -
Ada banyak opsi konfigurasi juga -
Saya menemukan pembatas khusus paling menarik.
sumber
Buat metode yang mirip dengan
String.format()
Javamenggunakan
sumber
Kutipan damai tahun 2020:
sumber
Cukup gunakan:
sumber
Uso:
sumber
var hello = "foo";
console.log (my_string, halo)
sumber