Pengantar
Saat bekerja dengan string, situasi mungkin muncul yang mengharuskan kita untuk secara dinamis menambahkan nilai tertentu ke string tersebut sehingga masih mengembalikan string, tindakan melakukan ini disebut sebagai interpolasi string.
Nilai dinamis ini bisa berupa variabel, status, atau apa pun yang berisi nilai aktual yang akan disematkan dalam string.
Dalam panduan ini, kita akan melihat bagaimana mengimplementasikan interpolasi string di React, dengan mempertimbangkan berbagai contoh yang mungkin memerlukan interpolasi string dan bagaimana hal itu dapat dicapai.
Interpolasi String di ES5 dan ES6
Interpolasi string dapat dilakukan dengan dua cara: concatenation dan template literal. Meskipun beberapa berpendapat bahwa penggabungan bukanlah interpolasi string, interpolasi string mengacu pada kemampuan untuk membuat string dengan melakukan substitusi placeholder, yang jelas-jelas dilakukan oleh penggabungan.
Sebelum pengenalan literal templat di ES6, kami selalu menggunakan penggabungan, yang menjadi sangat sulit ketika berhadapan dengan string multi-baris yang memerlukan substitusi banyak variabel. Ketika literal template diperkenalkan di ES6, mereka terbukti jauh lebih mudah untuk diterapkan, terutama untuk string yang lebih panjang atau multi-baris yang ingin kita sematkan ekspresinya.
Dalam panduan ini, kita akan melihat kedua metode dan kemudian melakukan beberapa contoh dengan literal template, yang merupakan pendekatan yang disarankan.
Interpolasi String dalam Bereaksi Dengan Penggabungan
Metode standar untuk penggabungan adalah dengan memanfaatkan +
operator di sekitar variabel atau status tertentu:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
Dalam kode di atas, kita memiliki status fontSize
yang memiliki nilai large
. Kami ingin kelas diambil secara dinamis โ misalnya bisa text-small
, text-large
, text-medium
, dll. Tergantung pada negara bagian, yang berbeda className
dengan demikian akan diterapkan pada judul!
Dengan penggabungan, pertama-tama kita akan menempatkan string kita yang sebenarnya dan kemudian menggunakan+
operator untuk menginterpolasi variabel dengan string yang sebenarnya, sehingga dapat mengembalikan nilai interpolasi:
Metode di atas menjadi rumit ketika kita adalah dua atau lebih variabel, dan terutama jika string ditambahkan di dalam string lain, dan tidak sampai akhir.
Interpolasi String untuk Bereaksi dengan Literal Template
Ini adalah metode terbaik untuk menangani interpolasi string. Itu ditambahkan di ES6 dan sejak itu menjadi metode yang paling umum digunakan untuk interpolasi string. Menggunakan literal template string, mari ulangi contoh sebelumnya:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
Seperti yang dapat kita lihat pada kode di atas, kita tidak lagi menggunakan operator plus di literal template, sebagai gantinya, kita menggunakan backticks untuk seluruh string dan kemudian menggunakan tanda dolar dan kurung kurawal untuk menyisipkan variabel dan nilai dinamis kita.
Pernyataan tersebut dievaluasi dan const fontSize
dimasukkan ke dalam tali.
Mari kita lihat beberapa contoh interpolasi string React lainnya!
Cara Menggunakan Interpolasi String untuk Melewati Nilai Gaya di React
Dalam situasi di mana kita memiliki data gaya yang disimpan dalam variabel yang ingin kita gunakan untuk menata teks secara internal di React, kita dapat menggunakan literal template:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Seperti yang kami katakan sebelumnya, tanda dolar dan kurung kurawal digunakan untuk menahan placeholder kami, dan ini akan mengembalikan gaya dengan cara yang benar:
Kita juga dapat melakukan evaluasi di dalam kurung kurawal, misalkan kita ingin bilangan tersebut dikalikan:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Cara Menggunakan Interpolasi String Dengan Ekspresi di React
Sejauh ini, kami telah melihat bahwa kami dapat melakukan evaluasi; penting juga untuk dicatat bahwa kita dapat menambahkan ekspresi di dalam kurung kurawal untuk mendapatkan nilai yang benar berdasarkan ekspresi dan menggunakannya:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Cara Menginterpolasi Beberapa String Baris Dengan Literal Template
Seperti yang kami katakan sebelumnya, literal template memudahkan untuk menambahkan placeholder ke string beberapa baris:
const App = () => { let user = { name: 'John Doe', age: 14, hobby: 'basket ball', }; let sentence = `The fact that ${user.name} is ${user.age} years old and his hobby is ${user.hobby} amazes me.`; return ( <div className="container"> <div> <p>{sentence}</p> </div> </div> );
};
Pada kode di atas, kita melihat betapa mudahnya menggunakan literal template dibandingkan dengan menggunakan penggabungan:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Cara Menggunakan Operator Logika Dengan Literal Template
Sejauh ini kita telah melihat cara melewatkan ekspresi dengan operator ternary, sebaiknya kita juga melihat bahwa operator logika juga dapat bekerja dengan literal template:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Kesimpulan
Kami mempelajari cara menerapkan interpolasi string menggunakan dua metode standar dalam artikel ini, serta seberapa kuat literal template. Sejak diperkenalkannya literal templat, kebanyakan orang lebih suka menggunakannya karena kesederhanaan penggunaan dan keterbacaan kode yang jauh lebih baik.
- '
- &
- a
- kemampuan
- Akun
- dicapai
- Bertindak
- menambahkan
- Meskipun
- selalu
- Lain
- aplikasi
- terapan
- pendekatan
- sekitar
- artikel
- menjadi
- TERBAIK
- Lebih baik
- kelas
- kode
- dibandingkan
- kompleks
- Wadah
- mengandung
- bisa
- membuat
- data
- berurusan
- Tergantung
- berbeda
- sulit
- Dolar
- dinamis
- tertanam
- terutama
- dll
- evaluasi
- contoh
- contoh
- ekspresi
- Pertama
- membimbing
- memegang
- Seterpercayaapakah Olymp Trade? Kesimpulan
- How To
- HTTPS
- melaksanakan
- penting
- contoh
- IT
- besar
- belajar
- baris
- baris
- melihat
- membuat
- Membuat
- metode
- lebih
- paling
- beberapa
- dikalikan
- jumlah
- operator
- operator
- tertentu
- Konsultan Ahli
- kuat
- Bereaksi
- mengacu
- ulangi
- membutuhkan
- kembali
- Pengembalian
- Tersebut
- menandatangani
- sejak
- situasi
- So
- beberapa
- tertentu
- standar
- Negara
- Pernyataan
- Masih
- gaya
- pengambilan
- Grafik
- us
- menggunakan
- nilai
- berbagai
- cara
- dalam
- Kerja
- kerja
- XML
- tahun