String dan Templat

13 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

Tulis string dengan petikan tunggal, petikan berganda dan backtick
Bina teks dengan template literal dan bukannya +
Bersihkan dan periksa teks dengan trim, toLowerCase, toUpperCase, includes, slice dan length

Idea utama

Kebanyakan perkara yang laman web paparkan ialah teks yang dibina oleh kod: ucapan, harga, mesej ralat. Template literal memudahkan pembinaan teks itu, dan method string membersihkan apa sahaja yang pengguna taip.

Tiga jenis tanda petikan

JavaScript

const a = "Jom makan!";          // double quotes
const b = 'Jom makan!';          // single quotes — exactly the same
const c = "It's lunch time";     // use " " when the text has an apostrophe
const d = 'She said "sedap"';    // use ' ' when the text has double quotes
const e = `Jom makan!`;          // backticks: a template literal (see below)

Petikan tunggal dan berganda berkelakuan sama — cuma pastikan konsisten. Kekunci backtick biasanya di bahagian atas kiri papan kekunci, di bawah Esc.

Mencantum teks: + vs template literal

Pencantuman dengan +

JavaScript

const item = "roti canai";
const qty = 2;
const msg = "You ordered " + qty + " " + item + ".";
// easy to forget a space: "You ordered 2roti canai."

Template literal

JavaScript

const item = "roti canai";
const qty = 2;
const msg = `You ordered ${qty} ${item}.`;
// reads like the final sentence

Di dalam backtick, ${ } memasukkan nilai sebarang ungkapan — variable, kira-kira, malah panggilan method.

JavaScript

const price = 1.8;
console.log(`2 roti canai = RM${(price * 2).toFixed(2)}`); // 2 roti canai = RM3.60

Alat string harian

JavaScript

const city = "  Kota Kinabalu ";

city.length;                // 16  — counts every character, spaces too
city.trim();                // "Kota Kinabalu" — removes spaces at both ends
city.trim().toUpperCase();  // "KOTA KINABALU"
city.toLowerCase();         // "  kota kinabalu "
city.includes("Kina");      // true  — case-sensitive!
city.includes("kina");      // false

const word = "Kinabalu";
word.slice(0, 4);           // "Kina" — from index 0 up to (not including) 4
word.slice(4);              // "balu" — from index 4 to the end
word.slice(-3);             // "alu"  — the last 3 characters

Kedudukan dalam string dipanggil indeks, dan ia bermula dari 0: dalam "Kinabalu", K ialah indeks 0 dan i ialah indeks 1. slice(start, end) termasuk start tetapi berhenti sebelum end.

Method tidak mengubah string asal

String tidak boleh diubah di tempatnya. name.trim() memulangkan string baharu yang sudah dipangkas — name itu sendiri kekal sama. Simpan hasilnya: const clean = name.trim();

Anda boleh merangkai method: email.trim().toLowerCase() memangkas dahulu, kemudian menukar hasilnya kepada huruf kecil. Setiap langkah menyerahkan string baharunya kepada langkah seterusnya.

Lihat kad dalam pratonton: jarak teksnya berselerak. Tulis semula message sebagai template literal (backtick dengan ${ }) supaya kad itu tertulis Hi siti! You have 120 points. — tiada ruang lebihan di sekeliling nama, dan ada ruang sebelum points.

Jangan ubah firstName: pengguna sebenar menaip dengan bersepah, jadi bersihkannya dengan kod (trim).

Semakan

message tertulis "Hi siti! You have 120 points."
message ialah template literal
firstName masih ada ruang bersepahnya
Kad memaparkan mesej itu

Uji kefahaman

const n = 3; — baris mana yang mencetak I ate 3 roti?

console.log("I ate ${n} roti");console.log("I ate " + n + " roti");console.log("I ate" + n + "roti");

let city = " Ipoh "; city.trim(); — apakah nilai city sekarang?

"Ipoh"" Ipoh " — tidak berubahundefined

Apakah "Melaka".slice(0, 3)?

"Mel""Mela""ela"

Apa yang anda pelajari

String ditulis dalam petikan "berganda" atau 'tunggal', atau backtick untuk template literal.
Template literal memasukkan nilai dengan ${ } dan lebih mudah dibaca berbanding rantaian +.
trim, toLowerCase, toUpperCase, includes dan slice memulangkan nilai baharu; length mengira aksara. Indeks bermula dari 0.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.