สตริง

ใน JavaScript ข้อมูลต้นฉบับจะถูกจัดเก็บเป็นสตริง ไม่มีประเภทแยกสำหรับอักขระตัวเดียว

รูปแบบภายในสำหรับสตริงจะเป็น UTF-16 เสมอ โดยไม่ได้เชื่อมโยงกับการเข้ารหัสหน้า

คำคม

มาจำประเภทของคำพูดกันดีกว่า

สตริงสามารถอยู่ภายในเครื่องหมายคำพูดเดี่ยว เครื่องหมายคำพูดคู่ หรือ backticks:

 ให้ single = 'single-quoted';
ให้ double = "double-quoted";

ให้ backticks = `backticks`;

เครื่องหมายคำพูดเดี่ยวและคู่โดยพื้นฐานแล้วจะเหมือนกัน อย่างไรก็ตาม Backticks ช่วยให้เราสามารถฝังนิพจน์ใดๆ ลงในสตริงได้ โดยการล้อมไว้ใน ${…} :

 ผลรวมฟังก์ชัน (a, b) {
  กลับ + b;
-

alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3

ข้อดีอีกประการของการใช้ backticks คืออนุญาตให้สตริงขยายหลายบรรทัด:

 ให้ guestList = `แขก:
 * จอห์น
 * พีท
 * แมรี่
-

การแจ้งเตือน (รายชื่อแขก); //รายชื่อแขกหลายบรรทัด

ดูเป็นธรรมชาติใช่ไหมล่ะ? แต่เครื่องหมายคำพูดเดี่ยวหรือคู่ไม่ทำงานในลักษณะนี้

หากเราใช้และลองใช้หลายบรรทัด จะมีข้อผิดพลาด:

 ให้ guestList = "แขก: // ข้อผิดพลาด: โทเค็นที่ไม่คาดคิด ผิดกฎหมาย
  * จอห์น";

เครื่องหมายคำพูดเดี่ยวและคู่มาจากการสร้างภาษาในสมัยโบราณ เมื่อไม่ได้คำนึงถึงความจำเป็นในการใช้สตริงหลายบรรทัด Backticks ปรากฏในภายหลังมากและมีความหลากหลายมากกว่า

Backticks ยังช่วยให้เราระบุ “ฟังก์ชันเทมเพลต” ก่อน backtick แรกได้ ไวยากรณ์คือ: func`string` ฟังก์ชั่น func จะถูกเรียกโดยอัตโนมัติ รับสตริงและนิพจน์ที่ฝังไว้ และสามารถประมวลผลได้ คุณลักษณะนี้เรียกว่า "เทมเพลตที่ติดแท็ก" ซึ่งไม่ค่อยพบเห็น แต่คุณสามารถอ่านเกี่ยวกับคุณลักษณะนี้ได้ใน MDN: ตัวอักษรเทมเพลต

อักขระพิเศษ

ยังคงสามารถสร้างสตริงหลายบรรทัดด้วยเครื่องหมายคำพูดเดี่ยวและคู่ได้โดยใช้สิ่งที่เรียกว่า "อักขระขึ้นบรรทัดใหม่" ซึ่งเขียนเป็น n ซึ่งหมายถึงการขึ้นบรรทัดใหม่:

 ให้ guestList = "แขก:n * จอห์นn * พีทn * แมรี่";

การแจ้งเตือน (รายชื่อแขก); // รายชื่อแขกหลายบรรทัด เช่นเดียวกับข้างบน

เพื่อเป็นตัวอย่างที่ง่ายกว่า สองบรรทัดนี้เท่ากัน เพียงแต่เขียนต่างกัน:

 ให้ str1 = "สวัสดีnโลก"; // สองบรรทัดโดยใช้ "สัญลักษณ์ขึ้นบรรทัดใหม่"

// สองบรรทัดโดยใช้บรรทัดใหม่ปกติและ backticks
ให้ str2 = `สวัสดี
โลก`;

การแจ้งเตือน (str1 == str2); // จริง

มีอักขระพิเศษอื่น ๆ ที่พบไม่บ่อย:

อย่างที่คุณเห็น อักขระพิเศษทั้งหมดเริ่มต้นด้วยอักขระแบ็กสแลช เรียกอีกอย่างว่า "ตัวละครหลบหนี"

เพราะมันพิเศษมาก หากเราต้องแสดงแบ็กสแลชจริง ภายในสตริง เราจำเป็นต้องเพิ่มเป็นสองเท่า:

 alert( `แบ็กสแลช: \` ); // แบ็กสแลช: 

สิ่งที่เรียกว่าเครื่องหมายคำพูด “escaped” ' , " , ` ใช้เพื่อแทรกเครื่องหมายคำพูดลงในสตริงที่มีเครื่องหมายคำพูดเดียวกัน

ตัวอย่างเช่น:

 alert( 'ฉันคือวอลรัส!' ); // ฉันคือวอลรัส!

อย่างที่คุณเห็น เราต้องเพิ่มเครื่องหมายคำพูดด้านในไว้หน้าด้วยเครื่องหมายแบ็กสแลช ' เพราะไม่เช่นนั้นมันจะระบุจุดสิ้นสุดของสตริง

แน่นอนว่าต้องยกเว้นเฉพาะเครื่องหมายคำพูดที่เหมือนกันกับเครื่องหมายคำพูดที่แนบมาเท่านั้น ดังนั้น เพื่อเป็นวิธีแก้ปัญหาที่หรูหรากว่านี้ เราสามารถเปลี่ยนไปใช้เครื่องหมายคำพูดคู่หรือ backticks แทนได้:

 alert( "ฉันคือวอลรัส!" ); // ฉันคือวอลรัส!

นอกจากอักขระพิเศษเหล่านี้แล้ว ยังมีสัญลักษณ์พิเศษสำหรับโค้ด Unicode u… ซึ่งไม่ค่อยได้ใช้และกล่าวถึงในบทเสริมเกี่ยวกับ Unicode

ความยาวสาย

คุณสมบัติ length มีความยาวสตริง:

 alert( `ของฉันn`.ความยาว ); // 3

โปรดทราบว่า n เป็นอักขระ "พิเศษ" ตัวเดียว ดังนั้นความยาวจึงเท่ากับ 3

length เป็นทรัพย์สิน

ผู้ที่มีพื้นฐานในภาษาอื่นบางครั้งพิมพ์ผิดโดยเรียก str.length() แทนที่จะเป็นเพียง str.length นั่นไม่ได้ผล

โปรดทราบว่า str.length เป็นคุณสมบัติที่เป็นตัวเลข ไม่ใช่ฟังก์ชัน ไม่จำเป็นต้องเพิ่มวงเล็บหลังจากนั้น ไม่ใช่ .length() แต่ .length

การเข้าถึงตัวละคร

หากต้องการรับอักขระที่ตำแหน่ง pos ให้ใช้วงเล็บเหลี่ยม [pos] หรือเรียกเมธอด str.at(pos) อักขระตัวแรกเริ่มต้นจากตำแหน่งศูนย์:

 ให้ str = `สวัสดี`;

// ตัวอักษรตัวแรก
การแจ้งเตือน (str[0] ); // ชม
การแจ้งเตือน ( str.at(0) ); // ชม

//ตัวอักษรตัวสุดท้าย
การแจ้งเตือน ( str[str.length - 1] ); // โอ
การแจ้งเตือน ( str.at(-1) );

อย่างที่คุณเห็น เมธอด .at(pos) มีประโยชน์ในการอนุญาตให้มีตำแหน่งติดลบ หาก pos เป็นลบ ระบบจะนับจากจุดสิ้นสุดของสตริง

ดังนั้น .at(-1) หมายถึงอักขระตัวสุดท้าย และ .at(-2) คืออักขระที่อยู่ข้างหน้า เป็นต้น

วงเล็บเหลี่ยมจะส่งกลับค่าดัชนีค่าลบ undefined เสมอ เช่น:

 ให้ str = `สวัสดี`;

การแจ้งเตือน (str[-2] ); // ไม่ได้กำหนด
การแจ้งเตือน ( str.at(-2) ); // ล

นอกจากนี้เรายังสามารถวนซ้ำอักขระที่ใช้ for..of :

 สำหรับ (ให้ถ่านของ "สวัสดี") {
  การแจ้งเตือน (ถ่าน); // H,e,l,l,o (char กลายเป็น "H" จากนั้น "e" แล้วก็ "l" ฯลฯ)
-

สตริงไม่เปลี่ยนรูป

ไม่สามารถเปลี่ยนสตริงใน JavaScript มันเป็นไปไม่ได้ที่จะเปลี่ยนตัวละคร

เรามาลองดูว่ามันใช้งานไม่ได้:

 ให้ str = 'สวัสดี';

STR[0] = 'h'; // ข้อผิดพลาด
การแจ้งเตือน (str[0] ); // ไม่ทำงาน

วิธีแก้ปัญหาตามปกติคือสร้างสตริงใหม่ทั้งหมดและกำหนดให้กับ str แทนที่จะเป็นสตริงเก่า

ตัวอย่างเช่น:

 ให้ str = 'สวัสดี';

STR = 'h' + STR[1]; // แทนที่สตริง

การแจ้งเตือน (str); // สวัสดี

ในส่วนต่อไปนี้ เราจะดูตัวอย่างเพิ่มเติมเกี่ยวกับเรื่องนี้

การเปลี่ยนคดี

วิธีการ toLowerCase() และ toUpperCase() เปลี่ยนกรณี:

 alert( 'อินเทอร์เฟซ'.toUpperCase() ); // อินเตอร์เฟซ
alert( 'อินเทอร์เฟซ'.toLowerCase() ); // อินเตอร์เฟซ

หรือหากเราต้องการให้ตัวอักษรตัวเดียวเป็นตัวพิมพ์เล็ก:

 alert( 'อินเทอร์เฟซ'[0].toLowerCase() ); // 'ฉัน'

ค้นหาสตริงย่อย

มีหลายวิธีในการค้นหาสตริงย่อยภายในสตริง

str.indexOf

วิธีแรกคือ str.indexOf(substr, pos)

โดยจะค้นหา substr ใน str โดยเริ่มจากตำแหน่งที่กำหนด pos และส่งคืนตำแหน่งที่พบรายการที่ตรงกัน หรือ -1 หากไม่พบสิ่งใดเลย

ตัวอย่างเช่น:

 ให้ str = 'วิดเจ็ตที่มีรหัส';

alert( str.indexOf('วิดเจ็ต') ); // 0 เนื่องจากพบ 'Widget' ที่จุดเริ่มต้น
alert( str.indexOf('วิดเจ็ต') ); // -1 ไม่พบ การค้นหาต้องตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

alert( str.indexOf("id") ); // 1 พบ "id" ที่ตำแหน่ง 1 (..idget with id)

พารามิเตอร์ตัวเลือกตัวที่สองช่วยให้เราสามารถเริ่มค้นหาจากตำแหน่งที่กำหนดได้

ตัวอย่างเช่น การปรากฏครั้งแรกของ "id" อยู่ที่ตำแหน่ง 1 หากต้องการค้นหาเหตุการณ์ถัดไป ให้เริ่มค้นหาจากตำแหน่งที่ 2 :

 ให้ str = 'วิดเจ็ตที่มีรหัส';

การแจ้งเตือน ( str.indexOf('id', 2) ) // 12

หากเราสนใจเหตุการณ์ทั้งหมด เราสามารถรัน indexOf แบบวนซ้ำได้ ทุกการโทรใหม่จะถูกสร้างขึ้นด้วยตำแหน่งหลังจากการแข่งขันครั้งก่อน:

 ให้ str = 'เจ้าเล่ห์เหมือนสุนัขจิ้งจอก แข็งแกร่งเหมือนวัว';

ให้เป้าหมาย = 'เป็น'; //ลองหาดูครับ

ให้ pos = 0;
ในขณะที่ (จริง) {
  ให้ foundPos = str.indexOf(เป้าหมาย, pos);
  ถ้า (foundPos == -1) แตก;

  alert( `พบได้ที่ ${foundPos}` );
  pos = พบ Pos + 1; // ค้นหาต่อจากตำแหน่งถัดไป
-

อัลกอริทึมเดียวกันสามารถจัดวางให้สั้นลงได้:

 ให้ str = "เจ้าเล่ห์เหมือนสุนัขจิ้งจอก แข็งแกร่งเหมือนวัว";
ให้เป้าหมาย = "เป็น";

ให้ pos = -1;
ในขณะที่ ((pos = str.indexOf (เป้าหมาย, pos + 1)) != -1) {
  การแจ้งเตือน (POS);
-

str.lastIndexOf(substr, position)

นอกจากนี้ยังมีวิธีการที่คล้ายกัน str.lastIndexOf(substr, ตำแหน่ง) ซึ่งค้นหาจากจุดสิ้นสุดของสตริงจนถึงจุดเริ่มต้น

มันจะแสดงรายการเหตุการณ์ในลำดับย้อนกลับ

มีความไม่สะดวกเล็กน้อยกับ indexOf ในการทดสอบ if เราไม่สามารถใส่ไว้ใน if เช่นนี้:

 ให้ str = "วิดเจ็ตที่มีรหัส";

ถ้า (str.indexOf("วิดเจ็ต")) {
    alert("เราเจอแล้ว"); // ใช้งานไม่ได้!
-

alert ในตัวอย่างด้านบนไม่แสดงเนื่องจาก str.indexOf("Widget") ส่งคืนค่า 0 (หมายความว่าพบรายการที่ตรงกันที่ตำแหน่งเริ่มต้น) ถูกต้อง แต่ if พิจารณาว่า 0 เป็น false

ดังนั้นเราควรตรวจสอบ -1 จริงๆ ดังนี้:

 ให้ str = "วิดเจ็ตที่มีรหัส";

ถ้า (str.indexOf("วิดเจ็ต") != -1) {
    alert("เราเจอแล้ว"); // ใช้งานได้แล้ว!
-

รวมถึง, startWith, สิ้นสุดด้วย

วิธีการที่ทันสมัยกว่า str.includes(substr, pos) คืนค่า true/false ขึ้นอยู่กับว่า str มี substr อยู่ภายในหรือไม่

เป็นตัวเลือกที่เหมาะสมหากเราต้องทดสอบแมตช์ แต่ไม่ต้องการตำแหน่ง:

 alert( "วิดเจ็ตที่มีรหัส".includes("วิดเจ็ต") ); // จริง

alert( "สวัสดี".รวม("ลาก่อน") ); // เท็จ

อาร์กิวเมนต์ที่สองที่เป็นทางเลือกของ str.includes คือตำแหน่งที่จะเริ่มค้นหาจาก:

 alert( "วิดเจ็ต".includes("id") ); // จริง
alert( "วิดเจ็ต".includes("id", 3) ); // false จากตำแหน่งที่ 3 ไม่มี "id"

วิธีการ str.startsWith และ str.endsWith ทำสิ่งที่พวกเขาพูด:

 alert( "วิดเจ็ต".startsWith("Wid") ); // จริงอยู่ "Widget" ขึ้นต้นด้วย "Wid"
alert( "วิดเจ็ต".endsWith("get") ); // จริงอยู่ "Widget" ลงท้ายด้วย "get"

รับสตริงย่อย

มี 3 วิธีใน JavaScript เพื่อรับสตริงย่อย: substring , substr และ slice

• str.slice(start [, end])

• ส่งกลับส่วนของสตริงตั้งแต่ start ถึง (แต่ไม่รวม) end

  ตัวอย่างเช่น:

   ให้ str = "stringify";
  การแจ้งเตือน ( str.slice (0, 5) ); // 'strin' สตริงย่อยตั้งแต่ 0 ถึง 5 (ไม่รวม 5)
  การแจ้งเตือน ( str.slice (0, 1) ); // 's' จาก 0 ถึง 1 แต่ไม่รวม 1 ดังนั้นจึงมีเฉพาะอักขระที่ 0

  หากไม่มีอาร์กิวเมนต์ที่สอง slice จะดำเนินต่อไปจนถึงจุดสิ้นสุดของสตริง:

   ให้ str = "stringify";
  การแจ้งเตือน( str.slice(2) ); // 'ringify' จากตำแหน่งที่ 2 จนจบ

  ค่าลบสำหรับ start/end ก็เป็นไปได้เช่นกัน หมายถึงตำแหน่งที่นับจากปลายสาย:

   ให้ str = "stringify";
  
  // เริ่มจากตำแหน่งที่ 4 จากขวา จบที่ 1 จากขวา
  การแจ้งเตือน( str.slice(-4, -1) ); // 'กิฟ'

• str.substring(start [, end])

• ส่งกลับส่วนของสตริง ระหว่าง start และ end (ไม่รวม end )

  สิ่งนี้เกือบจะเหมือนกับ slice แต่อนุญาตให้ start มากกว่า end (ในกรณีนี้ก็แค่สลับค่า start และ end )

  ตัวอย่างเช่น:

   ให้ str = "stringify";
  
  // สิ่งเหล่านี้เหมือนกันสำหรับสตริงย่อย
  การแจ้งเตือน( str.substring(2, 6) ); // "แหวน"
  การแจ้งเตือน( str.substring(6, 2) ); // "แหวน"
  
  // ...แต่ไม่ใช่สำหรับสไลซ์:
  การแจ้งเตือน( str.slice(2, 6) ); // "แหวน" (เหมือนกัน)
  การแจ้งเตือน ( str.slice (6, 2) ); // "" (สตริงว่าง)

  อาร์กิวเมนต์เชิงลบ (ไม่เหมือนกับสไลซ์) ไม่รองรับ แต่จะถือเป็น 0

• str.substr(start [, length])

• ส่งกลับส่วนของสตริงจาก start ด้วย length ที่กำหนด

  ตรงกันข้ามกับวิธีการก่อนหน้านี้ วิธีนี้จะช่วยให้เราระบุ length แทนตำแหน่งสิ้นสุดได้:

   ให้ str = "stringify";
  การแจ้งเตือน( str.substr(2, 4) ); // 'ring' จากตำแหน่งที่ 2 มี 4 ตัวอักษร

  อาร์กิวเมนต์แรกอาจเป็นค่าลบ โดยนับจากจุดสิ้นสุด:

   ให้ str = "stringify";
  การแจ้งเตือน ( str.substr(-4, 2) ); // 'gi' จากตำแหน่งที่ 4 จะได้ 2 ตัวอักษร

  วิธีการนี้อยู่ในภาคผนวก B ของข้อกำหนดภาษา หมายความว่าเฉพาะเอ็นจิ้น Javascript ที่โฮสต์บนเบราว์เซอร์เท่านั้นที่ควรรองรับ และไม่แนะนำให้ใช้ ในทางปฏิบัติได้รับการรองรับทุกที่

เรามาสรุปวิธีการเหล่านี้เพื่อหลีกเลี่ยงความสับสน:

จะเลือกอันไหน?

พวกเขาทั้งหมดสามารถทำงานได้ อย่างเป็นทางการ substr มีข้อเสียเปรียบเล็กน้อย: มันไม่ได้อธิบายไว้ในข้อกำหนดเฉพาะของ JavaScript หลัก แต่ในภาคผนวก B ซึ่งครอบคลุมคุณลักษณะเฉพาะเบราว์เซอร์ที่มีอยู่ส่วนใหญ่ด้วยเหตุผลทางประวัติศาสตร์ ดังนั้นสภาพแวดล้อมที่ไม่ใช่เบราว์เซอร์อาจไม่สามารถรองรับได้ แต่ในทางปฏิบัติมันใช้ได้กับทุกที่

จากอีกสองตัวแปร slice มีความยืดหยุ่นมากกว่าเล็กน้อย ช่วยให้เกิดข้อโต้แย้งเชิงลบและเขียนสั้นลง

ดังนั้น สำหรับการใช้งานจริง ก็เพียงพอแล้วที่จะจำเฉพาะ slice เท่านั้น

การเปรียบเทียบสตริง

ดังที่เราทราบจากบทการเปรียบเทียบ สตริงจะถูกเปรียบเทียบทีละอักขระตามลำดับตัวอักษร

แม้ว่าจะมีเรื่องแปลกประหลาดอยู่บ้าง

1. ตัวอักษรตัวพิมพ์เล็กจะต้องมากกว่าตัวพิมพ์ใหญ่เสมอ:

    การแจ้งเตือน( 'a' > 'Z' ); // จริง

2. ตัวอักษรที่มีเครื่องหมายกำกับเสียงถือว่า "ไม่เป็นระเบียบ":

    alert( 'เอิสเตอร์ไรช์' > 'ซีแลนด์' ); // จริง

   นี่อาจนำไปสู่ผลลัพธ์ที่แปลกหากเราจัดเรียงชื่อประเทศเหล่านี้ โดยปกติแล้วผู้คนมักคาดหวังว่า Zealand จะตามหลัง Österreich ในรายชื่อ

เพื่อให้เข้าใจถึงสิ่งที่เกิดขึ้น เราควรทราบว่าสตริงใน Javascript ได้รับการเข้ารหัสโดยใช้ UTF-16 นั่นคือ: อักขระแต่ละตัวมีรหัสตัวเลขที่สอดคล้องกัน

มีวิธีการพิเศษที่อนุญาตให้รับอักขระสำหรับโค้ดและย้อนกลับ:

• str.codePointAt(pos)

• ส่งกลับเลขทศนิยมที่แสดงรหัสสำหรับอักขระที่ตำแหน่ง pos :

   // ตัวอักษรตัวพิมพ์ต่างมีรหัสต่างกัน
  alert( "Z".codePointAt(0) ); // 90
  alert( "z".codePointAt(0) ); // 122
  alert( "z".codePointAt(0).toString(16) ); // 7a (หากเราต้องการค่าเลขฐานสิบหก)

• String.fromCodePoint(code)

• สร้างอักขระด้วย code ตัวเลข

   การแจ้งเตือน( String.fromCodePoint(90) ); // Z
  การแจ้งเตือน( String.fromCodePoint(0x5a) ); // Z (เรายังสามารถใช้ค่าฐานสิบหกเป็นอาร์กิวเมนต์ได้)

ตอนนี้เรามาดูอักขระที่มีรหัส 65..220 (ตัวอักษรละตินและเพิ่มอีกนิดหน่อย) โดยการสร้างสตริง:

 ให้ str = '';

สำหรับ (ให้ i = 65; i <= 220; i++) {
  str += String.fromCodePoint(i);
-
การแจ้งเตือน (str);
// เอาท์พุท:
// ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~ € ‚ƒ„
// ¡¢£¤¥¦§¨©ª®Â°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÅÅÆçÈÉÊËÌÍÎÏÐñÒÓÔÕÖ×ØÙÚÛÜ

ดู? อักขระตัวพิมพ์ใหญ่ไปก่อน จากนั้นอักขระพิเศษสองสามตัว จากนั้นอักขระตัวพิมพ์เล็ก และ Ö ใกล้จุดสิ้นสุดของเอาต์พุต

ตอนนี้เห็นได้ชัดว่าทำไม a > Z

อักขระจะถูกเปรียบเทียบด้วยรหัสตัวเลข รหัสที่ใหญ่กว่าหมายถึงอักขระที่ใหญ่กว่า รหัสสำหรับ ( a ) มากกว่ารหัสสำหรับ Z (90)

• ตัวอักษรพิมพ์เล็กทั้งหมดจะอยู่หลังตัวอักษรพิมพ์ใหญ่เนื่องจากรหัสมีขนาดใหญ่กว่า

• ตัวอักษรบางตัวเช่น Ö โดดเด่นจากตัวอักษรหลัก ในที่นี้ รหัสของมันมีค่ามากกว่าสิ่งใดๆ ตั้งแต่ a ถึง z

การเปรียบเทียบที่ถูกต้อง

อัลกอริธึม "ถูกต้อง" ในการเปรียบเทียบสตริงนั้นซับซ้อนกว่าที่คิด เนื่องจากตัวอักษรจะแตกต่างกันไปในแต่ละภาษา

ดังนั้นเบราว์เซอร์จำเป็นต้องรู้ภาษาเพื่อเปรียบเทียบ

โชคดีที่เบราว์เซอร์รุ่นใหม่รองรับมาตรฐานสากล ECMA-402

โดยมีวิธีการพิเศษในการเปรียบเทียบสตริงในภาษาต่างๆ ตามกฎเกณฑ์

การเรียก str.localeCompare(str2) ส่งคืนจำนวนเต็มที่ระบุว่า str น้อยกว่า เท่ากับ หรือมากกว่า str2 ตามกฎของภาษา:

• ส่งคืนค่าจำนวนลบหาก str น้อยกว่า str2

• ส่งคืนค่าจำนวนบวกหาก str มากกว่า str2

• ส่งคืนค่า 0 หากเทียบเท่ากัน

ตัวอย่างเช่น:

 alert( 'Österreich'.localeCompare('ซีแลนด์') ); // -1

วิธีนี้มีอาร์กิวเมนต์เพิ่มเติมสองข้อที่ระบุไว้ในเอกสารประกอบ ซึ่งอนุญาตให้ระบุภาษา (โดยค่าเริ่มต้นที่นำมาจากสภาพแวดล้อม ลำดับตัวอักษรจะขึ้นอยู่กับภาษา) และตั้งค่ากฎเพิ่มเติม เช่น ความละเอียดอ่อนของตัวพิมพ์เล็กหรือใหญ่ หรือควร "a" และ "á" ได้รับการปฏิบัติเหมือนอย่างเดียวกัน ฯลฯ

สรุป

• คำพูดมี 3 ประเภท Backticks อนุญาตให้สตริงขยายหลายบรรทัดและฝังนิพจน์ ${…}

• เราสามารถใช้อักขระพิเศษ เช่น การขึ้นบรรทัดใหม่ n

• หากต้องการรับอักขระ ให้ใช้: [] หรือ at method

• หากต้องการรับสตริงย่อย ให้ใช้: slice หรือ substring

• หากต้องการตัวพิมพ์เล็ก/ตัวพิมพ์ใหญ่ของสตริง ให้ใช้: toLowerCase/toUpperCase

• หากต้องการค้นหาสตริงย่อย ให้ใช้: indexOf หรือ includes/startsWith/endsWith เพื่อตรวจสอบแบบง่ายๆ

• หากต้องการเปรียบเทียบสตริงตามภาษา ให้ใช้: localeCompare มิฉะนั้นจะถูกเปรียบเทียบด้วยโค้ดอักขระ

มีวิธีการที่เป็นประโยชน์อื่นๆ อีกหลายวิธีในสตริง:

• str.trim() – ลบช่องว่าง (“trims”) ออกจากจุดเริ่มต้นและจุดสิ้นสุดของสตริง

• str.repeat(n) – ทำซ้ำสตริง n ครั้ง

• …และอีกมากมายที่จะพบได้ในคู่มือ

สตริงยังมีวิธีการค้นหา/แทนที่ด้วยนิพจน์ทั่วไปอีกด้วย แต่นั่นเป็นหัวข้อใหญ่ ดังนั้นจึงมีการอธิบายไว้ในส่วนบทช่วยสอนแยกต่างหาก นิพจน์ทั่วไป

นอกจากนี้ สิ่งสำคัญคือต้องทราบว่าสตริงนั้นใช้การเข้ารหัส Unicode และด้วยเหตุนี้จึงมีปัญหาในการเปรียบเทียบ มีข้อมูลเพิ่มเติมเกี่ยวกับ Unicode ในบท Unicode, String Internals

งาน

ตัวพิมพ์ใหญ่ของอักขระตัวแรก

ความสำคัญ: 5

เขียนฟังก์ชัน ucFirst(str) ที่ส่งคืนสตริง str ด้วยอักขระตัวแรกที่เป็นตัวพิมพ์ใหญ่ เช่น:

 ucFirst("จอห์น") == "จอห์น";

เปิดแซนด์บ็อกซ์พร้อมการทดสอบ

สารละลาย

เราไม่สามารถ "แทนที่" อักขระตัวแรกได้ เนื่องจากสตริงใน JavaScript ไม่เปลี่ยนรูป

แต่เราสามารถสร้างสตริงใหม่โดยอิงจากสตริงที่มีอยู่ โดยมีอักขระตัวแรกที่เป็นตัวพิมพ์ใหญ่:

 ให้ newStr = str[0].toUpperCase() + str.slice(1);

แม้ว่าจะมีปัญหาเล็กน้อยก็ตาม หาก str ว่างเปล่า ดังนั้น str[0] จะเป็น undefined และเนื่องจาก undefined ไม่มีเมธอด toUpperCase() เราจึงจะได้รับข้อผิดพลาด

วิธีที่ง่ายที่สุดคือเพิ่มการทดสอบสตริงว่าง เช่นนี้

 ฟังก์ชั่น ucFirst(str) {
  ถ้า (!str) กลับ str;

  กลับ str[0].toUpperCase() + str.slice(1);
-

alert( ucFirst("จอห์น") ); // จอห์น

เปิดโซลูชันพร้อมการทดสอบในแซนด์บ็อกซ์

ตรวจสอบสแปม

ความสำคัญ: 5

เขียนฟังก์ชัน checkSpam(str) ที่คืนค่า true หาก str มี 'ไวอากร้า' หรือ 'XXX' มิฉะนั้นจะ false

ฟังก์ชันจะต้องคำนึงถึงขนาดตัวพิมพ์:

 checkSpam('ซื้อ ViAgRA ทันที') == true
checkSpam('free xxxxx') == จริง
checkSpam("innocent rabbit") == false

เปิดแซนด์บ็อกซ์พร้อมการทดสอบ

สารละลาย

เพื่อให้การค้นหาไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ให้นำสตริงเป็นตัวพิมพ์เล็กแล้วค้นหา:

 ฟังก์ชั่นตรวจสอบสแปม (str) {
  ให้ lowerStr = str.toLowerCase();

  กลับ lowerStr.includes ('ไวอากร้า') || lowerStr.includes('xxx');
-

alert( checkSpam('ซื้อ ViAgRA ทันที') );
alert( checkSpam('xxxxx ฟรี') );
alert( checkSpam("กระต่ายผู้บริสุทธิ์") );

เปิดโซลูชันพร้อมการทดสอบในแซนด์บ็อกซ์

ตัดทอนข้อความ

ความสำคัญ: 5

สร้างฟังก์ชัน truncate(str, maxlength) ที่ตรวจสอบความยาวของ str และหากเกิน maxlength ให้แทนที่จุดสิ้นสุดของ str ด้วยอักขระจุดไข่ปลา "…" เพื่อทำให้ความยาวของมันเท่ากับ maxlength

ผลลัพธ์ของฟังก์ชันควรเป็นสตริงที่ถูกตัดทอน (หากจำเป็น)

ตัวอย่างเช่น:

 truncate("สิ่งที่ฉันอยากจะบอกในหัวข้อนี้คือ:", 20) == "สิ่งที่ฉันอยากจะบอก…"

truncate("สวัสดีทุกคน!", 20) == "สวัสดีทุกคน!"

เปิดแซนด์บ็อกซ์พร้อมการทดสอบ

สารละลาย

ความยาวสูงสุดจะต้องเป็น maxlength ดังนั้นเราจึงต้องตัดให้สั้นลงเล็กน้อยเพื่อให้มีที่ว่างสำหรับจุดไข่ปลา

โปรดทราบว่าจริงๆ แล้วมีอักขระ Unicode ตัวเดียวสำหรับจุดไข่ปลา นั่นไม่ใช่สามจุด

 ฟังก์ชั่นตัดทอน (str, ความยาวสูงสุด) {
  กลับ (str.length > ความยาวสูงสุด) ?
    str.slice(0, ความยาวสูงสุด - 1) + '…' : str;
-

เปิดโซลูชันพร้อมการทดสอบในแซนด์บ็อกซ์

ดึงเงินออกมา

ความสำคัญ: 4

เรามีต้นทุนในรูปแบบ "$120" นั่นคือ: เครื่องหมายดอลลาร์ไปก่อนแล้วตามด้วยตัวเลข

สร้างฟังก์ชัน extractCurrencyValue(str) ที่จะแยกค่าตัวเลขจากสตริงดังกล่าวแล้วส่งคืน

ตัวอย่าง:

 alert( extractCurrencyValue('$120') === 120 ); // จริง

เปิดแซนด์บ็อกซ์พร้อมการทดสอบ

สารละลาย

 ฟังก์ชั่น extractCurrencyValue (str) {
  กลับ +str.slice(1);
-

เปิดโซลูชันพร้อมการทดสอบในแซนด์บ็อกซ์