`String` objek

Artikel ini menerangkan objek String.

Penjelasan merangkumi segalanya dari asas hingga teknik lanjutan, termasuk perangkap berkaitan Unicode dan ekspresi biasa, langkah demi langkah dan dengan cara yang mudah difahami.

YouTube Video

String objek

String dalam JavaScript adalah salah satu jenis yang paling kerap digunakan dalam pembangunan harian.

Perbezaan Antara String Primer dan Objek String

String primer (seperti "hello") berkelakuan berbeza berbanding objek balutan seperti new String("hello"). Kebiasaannya, anda harus menggunakan string primer, dan jarang sekali perlu menggunakan bentuk objek.

1// Primitive string
2const a = "hello";
3
4// String wrapper object
5const b = new String("hello");
6
7console.log(typeof a); // "string"
8console.log(typeof b); // "object"
9console.log(a === b);  // false — wrapper objects are not strictly equal

• Kod ini menunjukkan perbezaan jenis antara string primer dan balutan, serta bagaimana mereka bertindak dengan perbandingan tegas. Dalam kebanyakan situasi, elakkan penggunaan new String() dan kekal menggunakan string primer.

Cara Membina String (Literal dan Literal Templat)

Literal templat berguna untuk menyisipkan pembolehubah dan menulis string berbilang baris. Anda boleh menyisipkan pembolehubah dan menilai ungkapan secara intuitif.

1const name = "Alice";
2const age = 30;
3
4// Template literal
5const greeting = `Name: ${name}, Age: ${age + 1}`;
6
7console.log(greeting); // "Name: Alice, Age: 31"

• Literal templat sangat mudah dibaca dan sesuai untuk membina string kompleks, termasuk string berbilang baris.

Kaedah Biasa (Carian dan Pengekstrakan Substring)

Objek String mempunyai banyak kaedah asas.

 1const text = "Hello, world! Hello again.";
 2
 3// search
 4console.log(text.indexOf("Hello"));       // 0
 5console.log(text.indexOf("Hello", 1));    // 13
 6console.log(text.includes("world"));      // true
 7console.log(text.startsWith("Hello"));    // true
 8console.log(text.endsWith("again."));     // true
 9
10// slice / substring
11console.log(text.slice(7, 12));           // "world"
12console.log(text.substring(7, 12));       // "world"

• slice dan substring adalah serupa, tetapi mereka mengendalikan indeks negatif dengan cara yang berbeza. slice mentafsir nilai negatif sebagai kedudukan dari hujung. Pastikan anda tahu yang mana satu perlu digunakan.

Memecahkan dan Menggabungkan (split / join)

Adalah biasa untuk memecahkan satu string menjadi array untuk diproses, kemudian menggabungkannya semula.

1const csv = "red,green,blue";
2const arr = csv.split(","); // ["red","green","blue"]
3
4console.log(arr);
5console.log(arr.join(" | ")); // "red | green | blue"

• Corak biasa adalah menggunakan split untuk membahagikan string, memproses array hasil dengan map atau filter, kemudian menggunakan join untuk menggabungkannya semula.

Gantian dan Ekspresi Biasa

replace hanya menggantikan padanan pertama sahaja. Jika anda ingin menggantikan semua padanan, gunakan bendera g bersama ekspresi biasa. Dengan memberikan fungsi sebagai pengganti, anda boleh melakukan gantian secara dinamik.

 1const s = "foo 1 foo 2";
 2
 3// replace first only
 4console.log(s.replace("foo", "bar")); // "bar 1 foo 2"
 5
 6// replace all using regex
 7console.log(s.replace(/foo/g, "bar")); // "bar 1 bar 2"
 8
 9// replace with function
10const r = s.replace(/\d+/g, (match) => String(Number(match) * 10));
11console.log(r);    // "foo 10 foo 20"

• Dengan gantian dinamik menggunakan fungsi, anda boleh menulis kod ringkas untuk menganalisis dan menukar padanan.

Penukaran Huruf Besar/Kecil dan Penormalan

Untuk sokongan dan perbandingan berbilang bahasa, selain daripada toLowerCase dan toUpperCase, penormalan Unicode (normalize) juga penting. Ini sangat diperlukan ketika membandingkan aksara beraksen.

 1// Case conversion example:
 2// "\u00DF" represents the German letter "ß".
 3// In some locales, converting "ß" to uppercase becomes "SS".
 4// JavaScript follows this behavior.
 5console.log("\u00DF");
 6console.log("\u00DF".toUpperCase()); // "SS"
 7
 8// Unicode normalization example:
 9// "e\u0301" is "e" + a combining acute accent.
10// "\u00e9" is the precomposed character "é".
11// These two look the same but are different code point sequences.
12const a = "e\u0301";
13const b = "\u00e9";
14
15console.log(a === b);   // false: different underlying code points
16console.log(a.normalize() === b.normalize()); // true: normalized to the same form

• Perwakilan Unicode yang berbeza, seperti ligatur dan aksara gabungan, tidak akan sama secara terus, jadi gunakan normalize() sebelum membandingkan.

Unicode dan Titik Kod (Mengendalikan Pasangan Surrogat)

String JavaScript adalah urutan unit kod UTF-16, jadi sesetengah aksara seperti emoji boleh menduduki dua unit kod untuk satu aksara. Untuk mengendalikan unit aksara sebenar, gunakan Array.from, operator spread, atau for...of.

 1// Emoji composed with multiple code points:
 2// "\u{1F469}" = woman, "\u{200D}" = Zero Width Joiner (ZWJ),
 3// "\u{1F4BB}" = laptop. Combined, they form a single emoji: 👩‍💻
 4const s = "\u{1F469}\u{200D}\u{1F4BB}";
 5console.log(s);
 6
 7// Length in UTF-16 code units (not actual Unicode characters):
 8// Because this emoji uses surrogate pairs + ZWJ, the length may be > 1.
 9console.log("Length:", s.length);
10
11// Iterate by Unicode code points (ES6 for...of iterates code points):
12// Each iteration gives a full Unicode character, not UTF-16 units.
13for (const ch of s) {
14  console.log(ch);
15}
16
17// Convert to an array of Unicode characters:
18console.log(Array.from(s));

• length mengembalikan bilangan unit kod, jadi anda mungkin tidak mendapat kiraan yang dijangka dengan emoji atau ligatur. for...of dan Array.from mengendalikan sesuatu yang hampir dengan aksara paparan (kluster grafem), tetapi jika anda perlukan sokongan grafem penuh, pertimbangkan menggunakan perpustakaan khusus.

Penggantian Ekspresi Biasa yang Selamat (Semasa Mengendalikan Input Pengguna)

Jika anda terlupa untuk melarikan input pengguna apabila menyisipkannya ke dalam ungkapan biasa, ia boleh menyebabkan tingkah laku yang tidak dijangka dan kelemahan keselamatan. Sentiasa larikan input pengguna sebelum menggunakannya dalam pola.

1function escapeRegex(s) {
2  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
3}
4
5const userInput = "a+b";
6const pattern = new RegExp(escapeRegex(userInput), "g");
7console.log("a+b a+b".replace(pattern, "X")); // "X X"

• Jangan gunakan string pengguna terus dalam ekspresi biasa; sentiasa larikan mereka sebelum membina regex.

Petua Prestasi: Gabungan dan Templat

Apabila menggabungkan banyak string kecil secara berurutan, memasukkannya ke dalam array dan menggunakan join boleh lebih cekap. Sebaliknya, string templat sangat mudah dibaca dan cukup pantas dalam kebanyakan kes.

 1// concatenation in loop (less ideal)
 2let s = "";
 3for (let i = 0; i < 1000; i++) {
 4  s += i + ",";
 5}
 6
 7// using array + join (often faster for many pieces)
 8const parts = [];
 9for (let i = 0; i < 1000; i++) {
10  parts.push(i + ",");
11}
12const s2 = parts.join("");

• Enjin JavaScript moden sangat dioptimumkan, jadi anda tidak perlu risau tentang prestasi untuk bilangan gabungan yang kecil. Namun, jika anda perlu menggabungkan puluhan ribu kali, menggunakan join boleh menjadi lebih cekap.

Teknik Praktikal Berguna: Padding, Trim, dan Repeat

trim, padStart, padEnd, dan repeat adalah kaedah yang mudah yang amat berguna dalam pemprosesan rentetan harian. Ia sering digunakan dalam situasi praktikal seperti memformat nilai input atau menyeragamkan format output.

1console.log("  hello  ".trim());       // "hello"
2console.log("5".padStart(3, "0"));     // "005"
3console.log("x".repeat(5));            // "xxxxx"

• Kaedah-kaedah ini boleh digunakan untuk menormalkan input borang atau menghasilkan output lebar tetap.

Perbandingan String (Perbandingan Tempatan)

localeCompare berkesan untuk membandingkan string mengikut susunan kamus bagi bahasa yang berlainan. Anda boleh menentukan bahasa dan pilihan kepekaan (seperti kepekaan huruf besar atau kecil).

1console.log(
2  "\u00E4".localeCompare("z", "de")
3); // may be -1 or other depending on locale
4
5console.log(
6  "a".localeCompare("A", undefined, { sensitivity: "base" })
7); // 0

• Untuk perbandingan di peringkat antarabangsa, gunakan localeCompare dan nyatakan lokal serta pilihan yang sesuai.

Contoh Praktikal: Menukarkan Satu Baris CSV kepada Objek (Alur Kerja Praktikal)

Kes penggunaan biasa adalah menghuraikan satu baris CSV ke dalam objek menggunakan gabungan split, trim, dan map. Untuk medan bertanda petik atau fail CSV yang kompleks, gunakan penghuraian CSV khusus.

 1// simple CSV parse (no quotes handling)
 2function parseCsvLine(line, headers) {
 3  const values = line.split(",").map(v => v.trim());
 4  const obj = {};
 5  headers.forEach((h, i) => obj[h] = values[i] ?? null);
 6  return obj;
 7}
 8
 9const headers = ["name", "age", "city"];
10const line = " Alice , 30 , New York ";
11console.log(parseCsvLine(line, headers));
12// { name: "Alice", age: "30", city: "New York" }

• Kaedah ini berfungsi untuk CSV ringkas, tetapi perlu diingat ia tidak dapat mengendalikan kes di mana koma berada dalam medan bertanda petik.

Perangkap Biasa

Terdapat beberapa spesifikasi dan tingkah laku yang mudah terlepas pandang dalam pengendalian string JavaScript. Untuk mengelakkan pepijat yang tidak dijangka, penting untuk mengambil tahu perkara berikut.

• Penggunaan new String() boleh menyebabkan keputusan tidak tepat dalam semakan jenis atau perbandingan. Dalam kebanyakan kes, jenis string primer sudah mencukupi.
• Dalam Unicode, satu aksara yang kelihatan boleh terdiri daripada pelbagai unit kod. Oleh itu, nilai yang dipulangkan oleh length mungkin tidak sepadan dengan bilangan aksara yang dipaparkan.
• Apabila memasukkan input pengguna ke dalam ekspresi biasa, sentiasa larikan terlebih dahulu.
• String.prototype.replace() secara lalai hanya menggantikan padanan pertama. Jika anda ingin menggantikan semua kejadian, gunakan bendera /g dalam ungkapan biasa anda.
• String adalah tidak boleh diubah (immutable), jadi semua operasi akan memulangkan string baharu. Adalah penting untuk sentiasa menetapkan nilai yang dipulangkan.

Ringkasan

Walaupun string JavaScript nampak mudah, penting untuk memahami ciri-cirinya berkaitan Unicode dan sifat tidak boleh diubah. Dengan menguasai asas-asasnya, anda dapat meningkatkan kebolehpercayaan dan kebolehbacaan pemprosesan string anda dengan ketara.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video