`String` na bagay

Ipinapaliwanag ng artikulong ito ang String na bagay.

Sinasaklaw ng paliwanag ang lahat mula sa mga batayan hanggang sa mga advanced na teknik, kabilang ang mga problemang may kaugnayan sa Unicode at regular expressions, sunud-sunod at madaling intindihin.

YouTube Video

String na bagay

Ang mga string sa JavaScript ay isa sa mga pinakaginagamit na uri sa pang-araw-araw na development.

Pagkakaiba ng mga Primitibong String at String na Bagay

Ang mga primitibong string (gaya ng "hello") ay kumikilos nang iba kumpara sa mga wrapper object tulad ng new String("hello"). Karaniwan, dapat mong gamitin ang mga primitive, at bihira lang na dapat gumamit ng object form.

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

• Ipinapakita ng code na ito ang pagkakaiba ng type sa pagitan ng primitive at wrapper at kung paano sila umaasal sa strict na paghahambing. Sa karamihan ng mga kaso, iwasan ang paggamit ng new String() at manatili sa primitives.

Mga Paraan ng Paglikha ng String (Literals at Template Literals)

Kapaki-pakinabang ang template literals para sa paglalagay ng mga variable at pagsusulat ng multi-line na string. Maari kang magpasok ng variable at suriin ang mga expression nang intuitively.

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"

• Ang template literals ay madaling basahin at mainam para sa paggawa ng masalimuot na string, kabilang ang multi-line na string.

Karaniwang Paraan (Paghahanap at Pagkuha ng Substring)

Maraming pangunahing paraan ang String na bagay.

 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"

• Magkatulad ang slice at substring, ngunit magkaiba kung paano nila hawakan ang negative indexes. Ang slice ay itinuturing ang mga negatibong halaga bilang posisyon mula sa dulo. Maging malinaw kung alin ang gagamitin.

Paghiwalay at Pagsama (split/join)

Karaniwan nang paghiwalayin ang string sa array para iproseso at saka pagsamahin muli.

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

• Karaniwang pattern ang paggamit ng split para hatiin ang string, iproseso ang array gamit ang map o filter, at pagkatapos ay gamitin ang join para pagsamahin muli.

Pagpalit at Regular Expressions

Ang replace ay pumapalit lamang sa unang match. Kung nais mong palitan ang lahat ng match, gumamit ng g flag sa regular expression. Maari kang magpasa ng function bilang pamalit upang magsagawa rin ng dynamic na pagpapalit.

 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"

• Sa dynamic na pampalit gamit ang function, makakagawa ka ng mas pinaikling code na sumusuri at nagbabago ng mga match.

Pag-convert ng Case at Normalization

Para sa multilinggwal na suporta at paghahambing, bukod sa toLowerCase at toUpperCase, mahalaga rin ang Unicode normalization (normalize). Lalo itong kailangan kapag naghahambing ng mga may accent na karakter.

 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

• Magkakaiba ang Unicode representation, tulad ng ligatures at pinagsamang character, kaya’t hindi sila pantay sa karaniwan; gamitin ang normalize() bago maghambing.

Unicode at Code Points (Paghawak ng Surrogate Pairs)

Ang mga string ng JavaScript ay mga sunud-sunod na UTF-16 code units, kaya ang ilang karakter gaya ng emojis ay maaaring gumamit ng dalawang code units para sa isang karakter. Upang mahawakan ang tunay na character units, gamitin ang Array.from, spread operator, o 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));

• Ang length ay nagbabalik ng bilang ng code units, kaya’t maaaring hindi tumugma sa inaasahang bilang kapag may emoji o ligature. Ang for...of at Array.from ay nag-aasikaso ng bagay na malapit sa ipinapakitang characters (grapheme clusters), ngunit kung kailangan mo ng ganap na grapheme support, gumamit ng specialized na library.

Ligtas na Pagpapalit gamit ang Regular Expression (Kapag Humahawak ng Input ng User)

Kung makalimutan mong i-escape ang input ng user kapag inilalagay ito sa isang regular na ekspresyon, maaari itong magdulot ng hindi inaasahang pag-uugali at kahinaan sa seguridad. Laging i-escape ang user input bago gamitin sa pattern.

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"

• Huwag gumamit ng user string nang direkta sa regular expressions; laging i-escape muna bago bumuo ng regex.

Mga Tip sa Performance: Pagdikit-dikit (Concatenation) at Mga Template

Kapag nagdudugtong ng maraming maliliit na string sunud-sunod, mas episyente kung ilagay ito sa array at gumamit ng join. Sa kabilang banda, madaling basahin at sapat ang bilis ng template strings sa karamihan ng sitwasyon.

 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("");

• Ang mga modernong JavaScript engine ay optimized na, kaya hindi mo na kailangang mag-alala tungkol sa performance kapag kaunti lang ang pinagdudugtong na string. Ngunit kung kinakailangan mong magdikit-dikit ng sampu-sampung libong beses, mas episyente ang paggamit ng join.

Kapaki-pakinabang na Praktikal na Teknik: Padding, Trim, at Repeat

Ang trim, padStart, padEnd, at repeat ay mga maginhawang pamamaraan na lalong kapaki-pakinabang sa pang-araw-araw na pagproseso ng string. Madalas itong ginagamit sa mga praktikal na sitwasyon gaya ng pag-format ng mga input value o pag-standardize ng mga output format.

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

• Maaaring gamitin ang mga pamamaraang ito para i-normalize ang form input o gumawa ng fixed-width na output.

Paghahambing ng String (Locale Comparison)

Epektibo ang localeCompare para sa paghahambing ng mga string ayon sa por-order ng diksyunaryo sa iba't ibang wika. Pwede mong tukuyin ang wika at mga sensitivity option (gaya ng case sensitivity).

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

• Para sa paghahambing na may internasyonal na suporta, gamitin ang localeCompare at tukuyin ang tamang locale at mga opsyon.

Praktikal na Halimbawa: Pag-convert ng CSV Row sa Bagay (Praktikal na Workflow)

Karaniwan ang paggamit ng kombinasyon ng split, trim, at map para gawing object ang isang CSV row. Para sa quoted fields o masalimuot na CSV files, gumamit ng dedikadong CSV parser.

 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" }

• Gumagana ang pamamaraang ito para sa simpleng CSV, ngunit hindi nito mahahawakan kapag ang kuwit ay nasa loob ng quoted na field.

Karaniwang Bitag o Pagkakamali

May ilang mga detalye at asal sa JavaScript string na madaling mabale-wala. Upang makaiwas sa hindi inaasahang bug, mahalaga na tandaan ang mga sumusunod na punto.

• Ang paggamit ng new String() ay maaaring magdulot ng maling resulta sa type checking o paghahambing. Sa karamihan ng kaso, sapat na ang primitive na string types.
• Sa Unicode, isang nakikitang karakter ay maaaring binubuo ng maraming code unit. Dahil dito, maaaring hindi tumugma ang halaga mula sa length sa tunay na bilang ng nakikitang karakter.
• Kapag isinama ang user input sa regular expression, siguraduhing i-escape muna ito.
• Ang String.prototype.replace() ay pumapalit lamang sa unang match bilang default. Kung gusto mong palitan lahat ng paglitaw, gamitin ang /g flag sa iyong regular na ekspresyon.
• Hindi nababago (immutable) ang mga string, kaya laging bumabalik ang operasyon ng bagong string. Mahalaga na laging italaga ang ibinalik na halaga.

Buod

Kahit mukhang simple ang mga string sa JavaScript, mahalaga pa ring maintindihan ang kanilang katangian tungkol sa Unicode at immutability. Sa pamamagitan ng pagsasanay sa mga batayan, mapapabuti mo nang malaki ang pagiging maaasahan at readability ng iyong string processing.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video