Pertimbangkan kode ini:
var age = 3;
console.log("I'm " + age + " years old!");
Apakah ada cara lain untuk memasukkan nilai variabel ke dalam string, selain dari penggabungan string?
javascript
string
string-interpolation
Tom Lehman
sumber
sumber
Show GRAPH of : ${fundCode}-${funcCode}
membuat sayaShow GRAPH of : AIP001-_sma
(gunakan backticks di sekitar string 1 .... tampaknya tidak dapat ditampilkan di sini)Jawaban:
Sejak ES6, Anda dapat menggunakan literal templat :
PS Perhatikan penggunaan tanda kutip mundur:
``
.sumber
tl; dr
Gunakan Template String Literals ECMAScript 2015, jika ada.
Penjelasan
Tidak ada cara langsung untuk melakukannya, sesuai spesifikasi ECMAScript 5, tetapi ECMAScript 6 memiliki string template , yang juga dikenal sebagai quasi-literals selama penyusunan spec. Gunakan seperti ini:
Anda dapat menggunakan ekspresi JavaScript apa pun yang valid di dalam
{}
. Sebagai contoh:Hal penting lainnya adalah, Anda tidak perlu khawatir tentang string multi-line lagi. Anda dapat menuliskannya sebagai
Catatan: Saya menggunakan io.js v2.4.0 untuk mengevaluasi semua string templat yang ditunjukkan di atas. Anda juga dapat menggunakan Chrome terbaru untuk menguji contoh yang ditunjukkan di atas.
Catatan: Spesifikasi ES6 sekarang diselesaikan , tetapi belum diimplementasikan oleh semua browser utama.
Menurut halaman Jaringan Pengembang Mozilla , ini akan diterapkan untuk dukungan dasar mulai dari versi berikut: Firefox 34, Chrome 41, Internet Explorer 12. Jika Anda pengguna Opera, Safari, atau Internet Explorer dan ingin tahu tentang ini sekarang , test bed ini dapat digunakan untuk bermain-main sampai semua orang mendapat dukungan untuk ini.
sumber
JavaScript Perbaikan Douglas Crockford mencakup
String.prototype.supplant
fungsi. Ini pendek, akrab, dan mudah digunakan:Jika Anda tidak ingin mengubah prototipe String, Anda selalu dapat mengadaptasinya menjadi standalone, atau menempatkannya di ruang nama lain, atau apa pun.
sumber
"The {0} says {1}, {1}, {1}!".supplant(['cow', 'moo'])
Peringatan: hindari sistem templat apa pun yang tidak memungkinkan Anda keluar dari pembatasnya sendiri. Sebagai contoh, Tidak akan ada cara untuk menghasilkan yang berikut menggunakan
supplant()
metode yang disebutkan di sini.Interpolasi sederhana dapat bekerja untuk skrip mandiri kecil, tetapi sering disertai dengan cacat desain ini yang akan membatasi penggunaan serius. Saya jujur lebih suka template DOM, seperti:
Dan gunakan manipulasi jQuery:
$('#age').text(3)
Sebagai alternatif, jika Anda hanya bosan dengan penggabungan string, selalu ada sintaks alternatif:
sumber
Array.join()
lebih lambat daripada+
penggabungan langsung ( gaya), karena mesin peramban (yang mencakup V8, yang mencakup simpul dan hampir semua yang menjalankan JS hari ini) telah mengoptimalkannya secara besar-besaran dan ada banyak perbedaan dalam mendukung penggabungan langsungtoken
- sehingga asalkan Anda tidak menyediakan objek data yang memilikiage
anggota, itu akan baik-baik saja.supplant
tidak beralasan:"I am 3 years old thanks to my {age} variable.".supplant({}));
mengembalikan persis string yang diberikan. Jikaage
diberikan, orang masih dapat mencetak{
dan}
menggunakan{{age}}
Coba pustaka sprintf (implementasi sprintf JavaScript sumber terbuka lengkap). Sebagai contoh:
vsprintf mengambil array argumen dan mengembalikan string yang diformat.
sumber
Saya menggunakan pola ini dalam banyak bahasa ketika saya belum tahu bagaimana melakukannya dengan benar dan hanya ingin mendapatkan ide dengan cepat:
Meskipun tidak terlalu efisien, saya menemukannya dapat dibaca. Selalu berhasil, dan selalu tersedia:
SELALU
sumber
Anda bisa menggunakan sistem template Prototype jika Anda benar-benar ingin menggunakan palu untuk memecahkan kacang:
sumber
Anda dapat dengan mudah menggunakan ES6
template string
dan transpile ke ES5 menggunakan transpilar yang tersedia seperti babel.http://www.es6fiddle.net/im3c3euc/
sumber
Coba kiwi , modul JavaScript ringan untuk interpolasi string.
Anda dapat melakukan
atau
sumber
Jika Anda ingin menginterpolasi dalam
console.log
output, maka cukupDi sini,
%s
adalah apa yang disebut "format specifier".console.log
memiliki dukungan interpolasi semacam ini.sumber
Inilah solusi yang mengharuskan Anda untuk memberikan objek dengan nilai-nilai. Jika Anda tidak memberikan objek sebagai parameter, itu akan menjadi default untuk menggunakan variabel global. Tapi lebih baik tetap menggunakan parameter, jauh lebih bersih.
sumber
eval
,eval
itu jahat!eval
, tetapi terkadang tidak. Sebagai contoh, jika OP ingin cara interpolasi menggunakan lingkup saat ini, tanpa harus melewati objek pencarian (seperti bagaimana interpolasi Groovy bekerja), saya cukup yakineval
akan diperlukan. Jangan hanya menggunakan "eval is evil" lama.eval
adalah satu-satunya cara untuk mengakses variabel lokal dalam ruang lingkup . Jadi jangan menolaknya hanya karena itu melukai perasaan Anda. BTW, saya juga lebih suka cara alternatif karena lebih aman, tetapieval
metode inilah yang tepat menjawab pertanyaan OP, oleh karena itu ada dalam jawabannya.eval
adalah bahwa tidak dapat mengakses vars dari lingkup lain, jadi jika.interpolate
panggilan Anda berada dalam fungsi lain, dan bukan global, itu tidak akan berfungsi.Memperluas jawaban kedua Greg Kindel , Anda dapat menulis sebuah fungsi untuk menghilangkan beberapa lapisan boiler:
Pemakaian:
sumber
Saya dapat menunjukkan kepada Anda sebuah contoh:
sumber
Sejak ES6, jika Anda ingin melakukan interpolasi string dalam kunci objek, Anda akan mendapatkan
SyntaxError: expected property name, got '${'
jika Anda melakukan sesuatu seperti:Anda sebaiknya melakukan yang berikut:
sumber
sumber
Menggunakan sintaks template gagal di browser lama, penting jika Anda membuat HTML untuk penggunaan umum. Menggunakan concatenation itu membosankan dan sulit dibaca, terutama jika Anda memiliki banyak ekspresi atau panjang, atau jika Anda harus menggunakan tanda kurung untuk menangani campuran item angka dan string (keduanya menggunakan operator +).
PHP memperluas string yang dikutip yang berisi variabel dan bahkan beberapa ekspresi menggunakan notasi yang sangat kompak:
$a="the color is $color";
Dalam JavaScript, fungsi yang efisien dapat ditulis untuk mendukung ini:,
var a=S('the color is ',color);
menggunakan sejumlah variabel argumen. Meskipun tidak ada keuntungan dibandingkan penggabungan dalam contoh ini, ketika ekspresi menjadi lebih panjang sintaks ini mungkin lebih jelas. Atau seseorang dapat menggunakan tanda dolar untuk memberi sinyal awal ekspresi menggunakan fungsi JavaScript, seperti dalam PHP.Di sisi lain, menulis fungsi penyelesaian yang efisien untuk menyediakan perluasan string seperti template untuk browser lama tidak akan sulit. Seseorang mungkin sudah melakukannya.
Akhirnya, saya membayangkan sprintf (seperti dalam C, C ++, dan PHP) dapat ditulis dalam JavaScript, meskipun akan sedikit kurang efisien daripada solusi lain ini.
sumber
Interpolasi fleksibel khusus:
sumber
Meskipun templat mungkin yang terbaik untuk kasus yang Anda gambarkan, jika Anda memiliki atau menginginkan data dan / atau argumen dalam bentuk iterable / array, Anda dapat menggunakannya
String.raw
.Dengan data sebagai array, seseorang dapat menggunakan operator spread:
sumber
Tidak dapat menemukan apa yang saya cari, kemudian menemukannya -
Jika Anda menggunakan Node.js, ada
util
paket bawaan dengan fungsi format yang berfungsi seperti ini:Secara kebetulan ini sekarang dibangun ke dalam
console.log
rasa juga di Node.js -sumber