Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 022dc88

Browse files
committed
Refactor string formatting and newline characters in article.md
1 parent 34ac6de commit 022dc88

File tree

1 file changed

+45
-36
lines changed

1 file changed

+45
-36
lines changed

‎1-js/05-data-types/03-string/article.md‎

Lines changed: 45 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
# สตริง (Strings)
22

3-
ในภาษา JavaScript ข้อมูลที่เป็นตัวอักษรจะถูกเก็บในรูปแบบของสตริง โดยไม่มีประเภทข้อมูลแยกต่างหากสําหรับอักขระเดี่ยว
3+
ในภาษา JavaScript ข้อมูลที่เป็นตัวอักษรจะถูกเก็บในรูปแบบของสตริง โดยไม่มีประเภทข้อมูลแยกต่างหากสําหรับอักขระเดี่ยว ซึ่งต่างจากบางภาษาโปรแกรมมิ่งอื่นๆ ที่มีประเภทข้อมูลเฉพาะสําหรับตัวอักษรเดี่ยว
44

5-
รูปแบบภายในของสตริงจะเป็น [UTF-16](https://en.wikipedia.org/wiki/UTF-16) เสมอ โดยไม่ขึ้นอยู่กับการเข้ารหัสของหน้าเว็บ
5+
รูปแบบภายในของสตริงใน JavaScript จะเป็น UTF-16 เสมอ โดยไม่ขึ้นอยู่กับการเข้ารหัสของหน้าเว็บ นี่หมายความว่าสตริงใน JavaScript สามารถรองรับอักขระยูนิโค้ดได้อย่างกว้างขวาง ทําให้สามารถทํางานกับข้อความในหลายภาษาได้อย่างมีประสิทธิภาพ
66

77
## เครื่องหมายคําพูด
88

9-
มาทบทวนประเภทของเครื่องหมายคําพูดกัน
9+
มาทบทวนประเภทของเครื่องหมายคําพูดที่ใช้ในการสร้างสตริงใน JavaScript กัน
10+
สตริงสามารถอยู่ภายในเครื่องหมายคําพูดได้ 3 แบบ:
1011

11-
สตริงสามารถอยู่ภายในเครื่องหมายคําพูดเดี่ยว เครื่องหมายคําพูดคู่ หรือเครื่องหมาย backticks ได้:
12+
เครื่องหมายคําพูดเดี่ยว (Single quotes)
13+
เครื่องหมายคําพูดคู่ (Double quotes)
14+
เครื่องหมาย backticks
15+
16+
ตัวอย่างการใช้งาน:
1217

1318
```js
1419
let single = 'single-quoted';
@@ -17,7 +22,9 @@ let double = "double-quoted";
1722
let backticks = `backticks`;
1823
```
1924

20-
เครื่องหมายคําพูดเดี่ยวและคู่มีลักษณะการทํางานเหมือนกัน แต่เครื่องหมาย backticks ช่วยให้เราสามารถแทรกนิพจน์ (expression) ใดๆ ลงในสตริงได้ โดยครอบด้วย `${...}`:
25+
เครื่องหมายคําพูดเดี่ยวและคู่มีลักษณะการทํางานเหมือนกัน แต่เครื่องหมาย backticks มีความสามารถพิเศษ ช่วยให้เราสามารถแทรกนิพจน์ (expression) ใดๆ ลงในสตริงได้ โดยครอบด้วย `${...}` ซึ่งเรียกว่า template literals หรือ template strings
26+
27+
ตัวอย่างการใช้ template literals:
2128

2229
```js run
2330
function sum(a, b) {
@@ -30,96 +37,98 @@ alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.
3037
ข้อดีอีกอย่างของการใช้ backticks คือสามารถทําให้สตริงมีหลายบรรทัดได้:
3138

3239
```js run
33-
let guestList = `รายชื่อแขก:
34-
* สมชาย
35-
* สมหญิง
36-
* สมศรี
40+
let guestList = `Guests:
41+
* John
42+
* Pete
43+
* Mary
3744
`;
3845

39-
alert(guestList); // แสดงรายชื่อแขกหลายบรรทัด
46+
alert(guestList); // a list of guests, multiple lines
4047
```
4148

42-
ดูเป็นธรรมชาติใช่ไหมล่ะ? แต่เครื่องหมายคําพูดเดี่ยวหรือคู่ไม่สามารถทําแบบนี้ได้
49+
สังเกตว่าการใช้ backticks ทําให้เราสามารถเขียนข้อความหลายบรรทัดได้อย่างเป็นธรรมชาติ โดยไม่ต้องใช้อักขระพิเศษเช่น `\n` เพื่อขึ้นบรรทัดใหม่
4350

44-
ถ้าเราใช้เครื่องหมายคําพูดเดี่ยวหรือคู่และพยายามใช้หลายบรรทัด จะเกิดข้อผิดพลาด:
51+
ในทางกลับกัน ถ้าเราใช้เครื่องหมายคําพูดเดี่ยวหรือคู่และพยายามใช้หลายบรรทัด จะเกิดข้อผิดพลาด:
4552

4653
```js run
4754
let guestList = "รายชื่อแขก: // Error: Unexpected token ILLEGAL
4855
* สมชาย";
4956
```
5057

51-
เครื่องหมายคําพูดเดี่ยวและคู่มีมาตั้งแต่ยุคแรกๆ ของการสร้างภาษา ซึ่งตอนนั้นยังไม่ได้คํานึงถึงความต้องการในการใช้สตริงหลายบรรทัด ส่วน backticks เพิ่งมาในภายหลังจึงมีความสามารถที่หลากหลายกว่า
58+
เครื่องหมายคําพูดเดี่ยวและคู่มีมาตั้งแต่ยุคแรกๆ ของการสร้างภาษา JavaScript ซึ่งตอนนั้นยังไม่ได้คํานึงถึงความต้องการในการใช้สตริงหลายบรรทัด ส่วน backticks เพิ่งมาในภายหลังใน ECMAScript 6 (ES6) จึงมีความสามารถที่หลากหลายกว่า
5259

53-
backticks ยังช่วยให้เราสามารถระบุ "ฟังก์ชันเทมเพลต" (template function) ก่อน backtick แรกได้ด้วย ไวยากรณ์คือ: <code>func&#96;string&#96;</code> ฟังก์ชัน `func` จะถูกเรียกโดยอัตโนมัติ รับสตริงและนิพจน์ที่แทรกเข้ามาและสามารถประมวลผลได้ คุณลักษณะนี้เรียกว่า "tagged templates" ซึ่งพบเห็นได้ไม่บ่อยนัก แต่คุณสามารถอ่านเพิ่มเติมได้ที่ MDN: [Template literals](mdn:/JavaScript/Reference/Template_literals#Tagged_templates)
60+
นอกจากนี้ backticks ยังช่วยให้เราสามารถระบุ "ฟังก์ชันเทมเพลต" (template function) ก่อน backtick แรกได้ด้วย ไวยากรณ์คือ: <code>func&#96;string&#96;</code> ฟังก์ชัน `func` จะถูกเรียกโดยอัตโนมัติ รับสตริงและนิพจน์ที่แทรกเข้ามาและสามารถประมวลผลได้ คุณลักษณะนี้เรียกว่า "tagged templates" ซึ่งมีประโยชน์มากในการสร้างสตริงที่ซับซ้อนหรือต้องการการประมวลผลพิเศษ แม้ว่าจะพบเห็นได้ไม่บ่อยนักในโค้ดทั่วไป แต่มีประโยชน์มากในไลบรารีหรือเฟรมเวิร์กบางตัว คุณสามารถอ่านเพิ่มเติมได้ที่เอกสารอ้างอิงของ MDN: [Template literals](mdn:/JavaScript/Reference/Template_literals#Tagged_templates)
5461

5562
## อักขระพิเศษ
5663

57-
เรายังสามารถสร้างสตริงหลายบรรทัดด้วยเครื่องหมายคําพูดเดี่ยวและคู่ได้ โดยใช้ "อักขระขึ้นบรรทัดใหม่" (newline character) ซึ่งเขียนเป็น `\n` ที่แสดงถึงการขึ้นบรรทัดใหม่:
64+
แม้ว่า backticks จะช่วยให้เราสร้างสตริงหลายบรรทัดได้ง่าย แต่เราก็ยังสามารถสร้างสตริงหลายบรรทัดด้วยเครื่องหมายคําพูดเดี่ยวและคู่ได้ โดยใช้ "อักขระขึ้นบรรทัดใหม่" (newline character) ซึ่งเขียนเป็น `\n`:
5865

5966
```js run
60-
let guestList = "รายชื่อแขก:\n * สมชาย\n * สมหญิง\n * สมศรี";
67+
let guestList = "Guests:\n * John\n * Pete\n * Mary";
6168

6269
alert(guestList); // แสดงรายชื่อแขกหลายบรรทัด เหมือนกับตัวอย่างก่อนหน้า
6370
```
6471

65-
ตัวอย่างที่ง่ายกว่านี้ สองบรรทัดต่อไปนี้เท่ากัน แค่เขียนต่างกัน:
72+
ตัวอย่างที่ง่ายกว่านี้ สองบรรทัดต่อไปนี้ให้ผลลัพธ์เหมือนกัน แค่เขียนต่างกัน:
6673

6774
```js run
68-
let str1 = "สวัสดี\nชาวโลก"; // สองบรรทัดโดยใช้ "สัญลักษณ์ขึ้นบรรทัดใหม่"
75+
let str1 = "Hello\nWorld"; // สองบรรทัดโดยใช้ "สัญลักษณ์ขึ้นบรรทัดใหม่"
6976

7077
// สองบรรทัดโดยใช้การขึ้นบรรทัดปกติและ backticks
71-
let str2 = `สวัสดี
72-
ชาวโลก`;
78+
let str2 = `Hello
79+
World`;
7380

74-
alert(str1 == str2); // true
81+
alert(str1 == str2); // true แสดงว่าทั้งสองสตริงเหมือนกัน
7582
```
7683

7784
มีอักขระพิเศษอื่นๆ ที่พบได้น้อยกว่า:
7885

7986
| อักขระ | คําอธิบาย |
8087
|-----------|-------------|
8188
|`\n`|ขึ้นบรรทัดใหม่|
82-
|`\r`|ในไฟล์ข้อความของ Windows การรวมกันของอักขระสองตัว `\r\n` แสดงถึงการขึ้นบรรทัดใหม่ ในขณะที่ระบบปฏิบัติการที่ไม่ใช่ Windows จะใช้แค่ `\n` นี่เป็นเพราะเหตุผลทางประวัติศาสตร์ ซอฟต์แวร์ Windows ส่วนใหญ่ก็เข้าใจ `\n` เช่นกัน |
83-
|`\'`, `\"`, <code>\\`</code>|เครื่องหมายคําพูด|
89+
|`\r`|Carriage return (ใช้ในระบบ Windows)|
90+
|`\t`|แท็บ (Tab)|
91+
|`\'`|เครื่องหมายคําพูดเดี่ยว|
92+
|`\"`|เครื่องหมายคําพูดคู่|
93+
|<code>\\`</code>|Backtick|
8494
|`\\`|แบ็คสแลช|
85-
|`\t`|แท็บ|
86-
|`\b`, `\f`, `\v`| Backspace, Form Feed, Vertical Tab -- กล่าวถึงเพื่อความครบถ้วน มาจากยุคเก่า ไม่ได้ใช้ในปัจจุบัน (คุณสามารถลืมมันไปได้เลย) |
8795

88-
ดังที่คุณเห็น อักขระพิเศษทั้งหมดเริ่มต้นด้วยเครื่องหมายแบ็คสแลช `\` ซึ่งเรียกว่า "อักขระหลบ" (escape character)
96+
สําหรับระบบปฏิบัติการ Windows การรวมกันของอักขระสองตัว `\r\n` แสดงถึงการขึ้นบรรทัดใหม่ ในขณะที่ระบบปฏิบัติการอื่นๆ เช่น macOS หรือ Linux จะใช้แค่ `\n` นี่เป็นเพราะเหตุผลทางประวัติศาสตร์ของการพัฒนาระบบปฏิบัติการ อย่างไรก็ตาม ซอฟต์แวร์ Windows ส่วนใหญ่ในปัจจุบันก็เข้าใจ `\n` เช่นกัน
8997

90-
เนื่องจากมันพิเศษมาก ถ้าเราต้องการแสดงแบ็คสแลชจริงๆ `\` ในสตริง เราต้องเขียนมันสองครั้ง:
98+
ดังที่คุณเห็น อักขระพิเศษทั้งหมดเริ่มต้นด้วยเครื่องหมายแบ็คสแลช `\` ซึ่งเรียกว่า "อักขระหลบ" (escape character) เนื่องจากมันมีความพิเศษ ถ้าเราต้องการแสดงแบ็คสแลชจริงๆ `\` ในสตริง เราต้องเขียนมันสองครั้ง:
9199

92100
```js run
93-
alert( `แบ็คสแลช: \\` ); // แบ็คสแลช: \
101+
alert( `The backslash: \\` ); // แสดงผล: แบ็คสแลช: \
94102
```
95103

96104
เครื่องหมายคําพูดที่ "หลบ" (escaped) `\'`, `\"`, <code>\\`</code> ใช้เพื่อแทรกเครื่องหมายคําพูดลงในสตริงที่ใช้เครื่องหมายคําพูดแบบเดียวกัน
97105

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

100108
```js run
101-
alert( 'ฉัน*!*\'*/!*คือ วอลรัส!' ); // *!*ฉัน'*/!*คือ วอลรัส!
109+
alert( 'I*!*\'*/!*m the Walrus!' ); // *!*I'm*/!* the Walrus!
102110
```
103111

104-
ดังที่คุณเห็น เราต้องนําเครื่องหมายแบ็คสแลช `\'` มาวางไว้หน้าเครื่องหมายคําพูดภายใน มิฉะนั้นมันจะบ่งบอกว่าเป็นจุดสิ้นสุดของสตริง
112+
ในตัวอย่างนี้ เราใช้ `\'` เพื่อแทรกเครื่องหมายคําพูดเดี่ยวลงในสตริงที่ล้อมรอบด้วยเครื่องหมายคําพูดเดี่ยวเช่นกัน ถ้าไม่ใช้ `\` JavaScript จะเข้าใจผิดว่าเครื่องหมายคําพูดนั้นเป็นจุดสิ้นสุดของสตริง
113+
114+
อย่างไรก็ตาม วิธีที่สะดวกและอ่านง่ายกว่าคือการใช้เครื่องหมายคําพูดที่ต่างกัน:
105115

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

108117
```js run
109-
alert( "ฉัน'คือ วอลรัส!" ); // ฉัน'คือ วอลรัส!
118+
alert( "I'm the Walrus!" ); // I'm the Walrus!
110119
```
111120

112-
นอกเหนือจากอักขระพิเศษเหล่านี้ ยังมีสัญกรณ์พิเศษสําหรับรหัส Unicode `\u...` ซึ่งใช้ไม่บ่อยนักและอยู่ในบทเสริมเกี่ยวกับ [Unicode](info:unicode)
121+
ในกรณีนี้ เราใช้เครื่องหมายคําพูดคู่ภายนอกและเครื่องหมายคําพูดเดี่ยวภายใน ทําให้ไม่ต้องใช้อักขระหลบและอ่านง่ายขึ้น
113122

114123
## ความยาวของสตริง
115124

116-
คุณสมบัติ `length` คือความยาวของสตริง:
125+
คุณสมบัติ `length` ใช้เพื่อหาความยาวของสตริง:
117126

118127
```js run
119-
alert( `สวัสดี\n`.length ); // 5
128+
alert( `My\n`.length ); // 3
120129
```
121130

122-
สังเกตว่า `\n` เป็น "อักขระพิเศษ" เดียว ดังนั้นความยาวจึงเป็น `5` จริงๆ
131+
สังเกตว่า `\n` เป็น "อักขระพิเศษ" เดียว ดังนั้นความยาวของสตริงนี้จึงเป็น `3`
123132

124133
```warn header="`length` เป็นคุณสมบัติ"
125134
ผู้ที่มีพื้นฐานจากภาษาอื่นบางครั้งอาจพิมพ์ผิดโดยเรียก `str.length()` แทนที่จะเป็นแค่ `str.length` ซึ่งไม่ทํางาน

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /