UTF-8 ย่อมาจาก “ รูปแบบการแปลง Unicode 8 บิต ” และสอดคล้องกับรูปแบบการเข้ารหัสที่ดีเยี่ยมเพื่อให้แน่ใจว่าอักขระจะแสดงอย่างเหมาะสมบนอุปกรณ์ทั้งหมดโดยไม่คำนึงถึงภาษา/สคริปต์ที่ใช้ นอกจากนี้ รูปแบบนี้ยังเป็นประโยชน์สำหรับหน้าเว็บและใช้สำหรับการจัดเก็บ การประมวลผล และการส่งข้อมูลข้อความบนอินเทอร์เน็ต
บทช่วยสอนนี้ครอบคลุมเนื้อหาตามที่ระบุไว้ด้านล่าง:
- การเข้ารหัส UTF-8 คืออะไร
- การเข้ารหัส UTF-8 ทำงานอย่างไร
- ค่าจุดโค้ดมีการคำนวณอย่างไร
- จะเข้ารหัส / ถอดรหัส UTF-8 ใน JavaScript ได้อย่างไร
- เข้ารหัส/ถอดรหัส UTF-8 ใน JavaScript โดยใช้วิธี “encodeURIComponent()” และ “decodeURIComponent()”
- เข้ารหัส/ถอดรหัส UTF-8 ใน JavaScript โดยใช้วิธี “encodeURI()” และ “decodeURI()”
- เข้ารหัส/ถอดรหัส UTF-8 ใน JavaScript โดยใช้นิพจน์ทั่วไป
- บทสรุป
การเข้ารหัส UTF-8 คืออะไร
“ การเข้ารหัส UTF-8 ” คือขั้นตอนการแปลงลำดับของอักขระ Unicode ให้เป็นสตริงที่เข้ารหัสซึ่งประกอบด้วยไบต์ 8 บิต การเข้ารหัสนี้สามารถแสดงช่วงอักขระจำนวนมากเมื่อเปรียบเทียบกับการเข้ารหัสอักขระอื่นๆ
การเข้ารหัส UTF-8 ทำงานอย่างไร
ในขณะที่แสดงอักขระใน UTF-8 จุดโค้ดแต่ละจุดจะแสดงด้วยไบต์ตั้งแต่หนึ่งไบต์ขึ้นไป ต่อไปนี้คือรายละเอียดของจุดโค้ดในช่วง ASCII:
- ไบต์เดียวแสดงถึงจุดโค้ดในช่วง ASCII (0-127)
- สองไบต์แสดงถึงจุดรหัสในช่วง ASCII (128-2047)
- สามไบต์แสดงถึงจุดโค้ดในช่วง ASCII (2048-65535)
- สี่ไบต์แสดงถึงจุดรหัสในช่วง ASCII (65536-1114111)
เป็นเช่นนั้นไบต์แรกของ ' UTF-8 ” ลำดับจะเรียกว่า “ ไบต์ผู้นำ ” ซึ่งให้ข้อมูลเกี่ยวกับจำนวนไบต์ในลำดับและค่าจุดโค้ดของอักขระ
“ไบต์ผู้นำ” สำหรับลำดับไบต์เดียว สอง สาม และสี่อยู่ในช่วง (0-127), (194-233), (224-239) และ (240-247) ตามลำดับ
ไบต์ที่เหลือตามลำดับเรียกว่า “ ต่อท้าย ” ไบต์ ไบต์สำหรับลำดับ 2, 3 และ 4 ไบต์ทั้งหมดอยู่ในช่วง (128-191) ด้วยเหตุนี้จึงสามารถคำนวณค่าจุดโค้ดของอักขระได้โดยการวิเคราะห์ไบต์นำหน้าและต่อท้าย
ค่าจุดโค้ดมีการคำนวณอย่างไร
ค่าจุดรหัสสำหรับลำดับไบต์ที่แตกต่างกันจะถูกคำนวณดังนี้:
- ลำดับสองไบต์: จุดรหัสเทียบเท่ากับ “((lb – 194) * 64) + (tb – 128)”
- ลำดับสามไบต์ : จุดรหัสเทียบเท่ากับ “((lb – 224) * 4096) + ((tb1 – 128) * 64) + (tb2 – 128)”
- ลำดับสี่ไบต์ : จุดรหัสเทียบเท่ากับ “((lb – 240) * 262144) + ((tb1 – 128) * 4096) + ((tb2 – 128) * 64) + (tb3 – 128)”
จะเข้ารหัส / ถอดรหัส UTF-8 ใน JavaScript ได้อย่างไร
การเข้ารหัสและถอดรหัส UTF-8 ใน JavaScript สามารถทำได้ผ่านวิธีการที่ระบุไว้ด้านล่าง:
- “ enodeURIComponent () ' และ ' ถอดรหัสURIComponent() วิธีการ
- “ เข้ารหัสURI() ' และ ' ถอดรหัสURI() วิธีการ
- นิพจน์ทั่วไป
วิธีที่ 1: เข้ารหัส/ถอดรหัส UTF-8 ใน JavaScript โดยใช้วิธี “encodeURIComponent()” และ “decodeURIComponent()”
“ เข้ารหัสURIComponent() ” วิธีการเข้ารหัสองค์ประกอบ URI นอกจากนี้ยังสามารถเข้ารหัสอักขระพิเศษเช่น @, &, :, +, $, # เป็นต้น ถอดรหัสURIComponent() ” วิธีการถอดรหัสองค์ประกอบ URI วิธีการเหล่านี้สามารถใช้เพื่อเข้ารหัสและถอดรหัสค่าที่ส่งผ่านเป็น UTF-8 ตามลำดับ
ไวยากรณ์ (“encodeURIComponent()” วิธีการ)
encodeURIComponent ( x )ในไวยากรณ์ที่กำหนด “ x ” หมายถึง URI ที่จะเข้ารหัส
ค่าส่งคืน
วิธีการนี้เรียกข้อมูล URI ที่เข้ารหัสเป็นสตริง
ไวยากรณ์ (“decodeURIComponent()” วิธีการ)
ถอดรหัสURIComponent ( x )ที่นี่, ' x ” หมายถึง URI ที่จะถอดรหัส
ค่าส่งคืน
เมธอดนี้ให้ URI ที่ถอดรหัสแล้ว
ตัวอย่างที่ 1: การเข้ารหัส UTF-8 ใน JavaScript
ตัวอย่างนี้เข้ารหัสสตริงที่ส่งผ่านเป็นค่า UTF-8 ที่เข้ารหัสด้วยความช่วยเหลือของฟังก์ชันที่ผู้ใช้กำหนด:
กลับ หลบหนี ( encodeURIComponent ( x ) ) ;
}
ปล่อยให้วาล = 'ที่นี่' ;
คอนโซล บันทึก ( 'มูลค่าที่กำหนด ->' + วาล ) ;
ให้ encodeVal = encode_utf8 ( วาล ) ;
คอนโซล บันทึก ( 'ค่าที่เข้ารหัส ->' + encodeVal ) ;
ในบรรทัดรหัสเหล่านี้ ให้ทำตามขั้นตอนที่ระบุด้านล่าง:
- ขั้นแรกให้กำหนดฟังก์ชัน “ encode_utf8() ” ที่เข้ารหัสสตริงที่ส่งผ่านซึ่งแสดงโดยพารามิเตอร์ที่ระบุ
- การเข้ารหัสนี้กระทำโดย “ เข้ารหัสURIComponent() ” วิธีการในการกำหนดฟังก์ชัน
- บันทึก: “ หลบหนี() ” วิธีการแทนที่ลำดับหลีกใด ๆ ด้วยอักขระที่แสดงโดยมัน
- หลังจากนั้นให้กำหนดค่าเริ่มต้นที่จะเข้ารหัสและแสดงผล
- ตอนนี้ เรียกใช้ฟังก์ชันที่กำหนดและส่งชุดอักขระที่กำหนดไว้เป็นอาร์กิวเมนต์เพื่อเข้ารหัสค่านี้เป็น UTF-8
เอาท์พุต
ในที่นี้สามารถบอกเป็นนัยได้ว่าอักขระแต่ละตัวจะถูกแสดงและเข้ารหัสในรูปแบบ UTF-8 ตามลำดับ
ตัวอย่างที่ 2: การถอดรหัส UTF-8 ใน JavaScript
การสาธิตโค้ดด้านล่างนี้จะถอดรหัสค่าที่ส่งผ่าน (ในรูปแบบอักขระ) ไปเป็นการแสดง UTF-8 ที่เข้ารหัส:
กลับ ถอดรหัสURIComponent ( หนี ( x ) ) ;
}
ปล่อยให้วาล = 'çè' ;
คอนโซล บันทึก ( 'มูลค่าที่กำหนด ->' + วาล ) ;
ให้ถอดรหัส = decode_utf8 ( วาล ) ;
คอนโซล บันทึก ( 'ค่าที่ถอดรหัส ->' + ถอดรหัส ) ;
ในบล็อกโค้ดนี้:
- ในทำนองเดียวกันให้กำหนดฟังก์ชัน “ decode_utf8() ” ที่ถอดรหัสการรวมอักขระที่ส่งผ่านผ่านทาง “ ถอดรหัสURIComponent() ' วิธี.
- บันทึก: “ หนี() ” วิธีการดึงสตริงใหม่ที่อักขระต่างๆ จะถูกแทนที่ด้วยลำดับหลีกเลขฐานสิบหก
- หลังจากนั้นให้ระบุการรวมอักขระที่จะถอดรหัสและเข้าถึงฟังก์ชันที่กำหนดเพื่อทำการถอดรหัสเป็น UTF-8 อย่างเหมาะสม
เอาท์พุต
ในที่นี้ อาจบอกเป็นนัยได้ว่าค่าที่เข้ารหัสในตัวอย่างก่อนหน้านี้ถูกถอดรหัสเป็นค่าเริ่มต้น
วิธีที่ 2: เข้ารหัส/ถอดรหัส UTF-8 ใน JavaScript โดยใช้วิธี “encodeURI()” และ “decodeURI()”
“ เข้ารหัสURI() ” วิธีการเข้ารหัส URI โดยการแทนที่แต่ละอินสแตนซ์ของอักขระหลายตัวด้วยลำดับการหลีกเลี่ยงจำนวนหนึ่งซึ่งแสดงถึงการเข้ารหัส UTF-8 ของอักขระ เมื่อเทียบกับ “ เข้ารหัสURIComponent() ” วิธีการนี้จะเข้ารหัสอักขระที่จำกัด
“ ถอดรหัสURI() ” วิธีการถอดรหัส URI (เข้ารหัส) วิธีการเหล่านี้สามารถนำมาใช้ร่วมกันเพื่อเข้ารหัสและถอดรหัสการรวมกันของอักขระในค่าที่เข้ารหัส UTF-8
ไวยากรณ์ (วิธี encodeURI ())
เข้ารหัสURI ( x )ในไวยากรณ์ข้างต้น “ x ” สอดคล้องกับค่าที่จะเข้ารหัสเป็น URI
ค่าส่งคืน
วิธีการนี้ดึงค่าที่เข้ารหัสในรูปแบบของสตริง
ไวยากรณ์ (วิธี decodeURI ())
ถอดรหัสURI ( x )ที่นี่, ' x ” หมายถึง URI ที่เข้ารหัสที่ต้องการถอดรหัส
ค่าส่งคืน
ส่งคืน URI ที่ถอดรหัสแล้วเป็นสตริง
ตัวอย่างที่ 1: การเข้ารหัส UTF-8 ใน JavaScript
การสาธิตนี้เข้ารหัสชุดอักขระที่ส่งผ่านเป็นค่า UTF-8 ที่เข้ารหัส:
กลับ หลบหนี ( เข้ารหัสURI ( x ) ) ;
}
ปล่อยให้วาล = 'ที่นี่' ;
คอนโซล บันทึก ( 'มูลค่าที่กำหนด ->' + วาล ) ;
ให้ encodeVal = encode_utf8 ( วาล ) ;
คอนโซล บันทึก ( 'ค่าที่เข้ารหัส ->' + encodeVal ) ;
ที่นี่ จำแนวทางในการกำหนดฟังก์ชันที่จัดสรรสำหรับการเข้ารหัส ตอนนี้ ใช้เมธอด “encodeURI()” เพื่อแสดงชุดอักขระที่ส่งผ่านเป็นสตริงที่เข้ารหัส UTF-8 หลังจากนั้น ให้กำหนดอักขระที่จะประเมินและเรียกใช้ฟังก์ชันที่กำหนดโดยส่งค่าที่กำหนดเป็นอาร์กิวเมนต์เพื่อทำการเข้ารหัส
เอาท์พุต
เห็นได้ชัดว่าชุดอักขระที่ส่งผ่านได้รับการเข้ารหัสสำเร็จ
ตัวอย่างที่ 2: การถอดรหัส UTF-8 ใน JavaScript
การสาธิตโค้ดด้านล่างนี้จะถอดรหัสค่า UTF-8 ที่เข้ารหัส (ในตัวอย่างก่อนหน้านี้):
กลับ ถอดรหัสURI ( หนี ( x ) ) ;
}
ปล่อยให้วาล = 'çè' ;
คอนโซล บันทึก ( 'มูลค่าที่กำหนด ->' + วาล ) ;
ให้ถอดรหัส = decode_utf8 ( วาล ) ;
คอนโซล บันทึก ( 'ค่าที่ถอดรหัส ->' + ถอดรหัส ) ;
ตามโค้ดนี้ ให้ประกาศฟังก์ชัน “ decode_utf8() ” ที่ประกอบด้วยพารามิเตอร์ที่ระบุซึ่งแสดงถึงการรวมกันของอักขระที่จะถอดรหัสโดยใช้ “ ถอดรหัสURI() ' วิธี. ตอนนี้ ให้ระบุค่าที่จะถอดรหัสและเรียกใช้ฟังก์ชันที่กำหนดเพื่อใช้การถอดรหัสกับ “ UTF-8 ” การเป็นตัวแทน
เอาท์พุต
ผลลัพธ์นี้บอกเป็นนัยว่าค่าที่เข้ารหัสก่อนหน้านี้ได้รับการตัดสินใจตามนั้น
วิธีที่ 3: เข้ารหัส/ถอดรหัส UTF-8 ใน JavaScript โดยใช้นิพจน์ทั่วไป
วิธีการนี้ใช้การเข้ารหัสเพื่อให้สตริง Unicode หลายไบต์ถูกเข้ารหัสเป็น UTF-8 อักขระไบต์เดี่ยวหลายตัว ในทำนองเดียวกัน การถอดรหัสจะดำเนินการเพื่อให้สตริงที่เข้ารหัสถูกถอดรหัสกลับไปเป็นอักขระ Unicode แบบหลายไบต์
ตัวอย่างที่ 1: การเข้ารหัส UTF-8 ใน JavaScript
รหัสด้านล่างเข้ารหัสสตริง Unicode หลายไบต์เป็นอักขระไบต์เดี่ยว UTF-8:
ถ้า ( ประเภทของ วาล != 'สตริง' ) โยน ใหม่ ประเภทข้อผิดพลาด ( 'พารามิเตอร์' วาล 'ไม่ใช่สตริง' ) ;
ค่าคงที่ string_utf8 = วาล แทนที่ (
/[\u0080-\u07ff]/ก , // U+0080 - U+07FF => 2 ไบต์ 110yyyyy, 10zzzzzz
การทำงาน ( x ) {
เคยเป็น ออก = x. charCodeAt ( 0 ) ;
กลับ สตริง . จากCharCode ( 0xc0 | ออก >> 6 , 0x80 | ออก & 0x3f ) ; }
) . แทนที่ (
/[\u0800-\uffff]/g , // U+0800 - U+FFFF => 3 ไบต์ 1110xxxx, 10yyyyyy, 10zzzzzz
การทำงาน ( x ) {
เคยเป็น ออก = x. charCodeAt ( 0 ) ;
กลับ สตริง . จากCharCode ( 0xe0 | ออก >> 12 , 0x80 | ออก >> 6 & 0x3F , 0x80 | ออก & 0x3f ) ; }
) ;
คอนโซล บันทึก ( 'ค่าที่เข้ารหัสโดยใช้นิพจน์ทั่วไป -> ' + string_utf8 ) ;
}
เข้ารหัสUTF8 ( 'ที่นี่' )
ในข้อมูลโค้ดนี้:
- กำหนดฟังก์ชั่น “ เข้ารหัสUTF8() ” ประกอบด้วยพารามิเตอร์ที่แสดงค่าที่จะเข้ารหัสเป็น “ UTF-8 '.
- ในคำจำกัดความ ให้ใช้การตรวจสอบกับค่าที่ส่งผ่านซึ่งไม่ใช่สตริงโดยใช้เครื่องหมาย “ ประเภทของ ” ตัวดำเนินการและส่งคืนข้อยกเว้นแบบกำหนดเองที่ระบุผ่านทาง “ โยน ' คำสำคัญ.
- หลังจากนั้นให้สมัคร “ ถ่านรหัสAt() ' และ ' จากCharCode() ” วิธีการดึงข้อมูล Unicode ของอักขระตัวแรกในสตริงและแปลงค่า Unicode ที่กำหนดให้เป็นอักขระตามลำดับ
- สุดท้าย เรียกใช้ฟังก์ชันที่กำหนดโดยส่งลำดับอักขระที่กำหนดเพื่อเข้ารหัสค่านี้เป็น ' UTF-8 ” การเป็นตัวแทน
เอาท์พุต
ผลลัพธ์นี้บ่งบอกว่าการเข้ารหัสดำเนินไปอย่างเหมาะสม
ตัวอย่างที่ 2: การถอดรหัส UTF-8 ใน JavaScript
ในการสาธิตนี้ ลำดับของอักขระจะถูกถอดรหัสเป็น “ UTF-8 ” การเป็นตัวแทน:
ถ้า ( ประเภทของ วาล != 'สตริง' ) โยน ใหม่ ประเภทข้อผิดพลาด ( 'พารามิเตอร์' วาล 'ไม่ใช่สตริง' ) ;
ค่าคงที่ STR = วาล แทนที่ (
/[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g ,
การทำงาน ( x ) {
เคยเป็น ออก = ( ( x. charCodeAt ( 0 ) & 0x0f ) << 12 ) | ( ( x. charCodeAt ( 1 ) & 0x3f ) << 6 ) | ( x. charCodeAt ( 2 ) & 0x3f ) ;
กลับ สตริง . จากCharCode ( ออก ) ; }
) . แทนที่ (
/[\u00c0-\u00df][\u0080-\u00bf]/g ,
การทำงาน ( x ) {
เคยเป็น ออก = ( x. charCodeAt ( 0 ) & 0x1f ) < '+str);
}
ถอดรหัสUTF8('çè')
ในรหัสนี้:
- ในทํานองเดียวกัน ให้นิยามฟังก์ชัน “ ถอดรหัสUTF8() ” มีพารามิเตอร์ที่อ้างอิงถึงค่าที่ส่งผ่านที่จะถอดรหัส
- ในคำจำกัดความของฟังก์ชัน ให้ตรวจสอบเงื่อนไขสตริงของค่าที่ส่งผ่านปุ่ม “ ประเภทของ ” ผู้ดำเนินการ
- ตอนนี้ใช้ ' ถ่านรหัสAt() ” วิธีการดึงข้อมูล Unicode ของอักขระสตริงตัวแรก ตัวที่สอง และตัวที่สาม ตามลำดับ
- นอกจากนี้ ให้ใช้เครื่องหมาย “ String.fromCharCode() ” วิธีการแปลงค่า Unicode ให้เป็นอักขระ
- ในทำนองเดียวกัน ให้ทำซ้ำขั้นตอนนี้อีกครั้งเพื่อดึง Unicode ของอักขระสตริงตัวแรกและตัวที่สอง และแปลงค่า Unicode เหล่านี้เป็นอักขระ
- สุดท้าย เข้าถึงฟังก์ชันที่กำหนดเพื่อส่งคืนค่าถอดรหัส UTF-8
เอาท์พุต
ที่นี่สามารถตรวจสอบได้ว่าการถอดรหัสทำถูกต้องหรือไม่
บทสรุป
การเข้ารหัส/ถอดรหัสในรูปแบบ UTF-8 สามารถทำได้ผ่านทาง ' enodeURIComponent()” และ ' ถอดรหัสURIComponent() วิธีการ “ เข้ารหัสURI() ' และ ' ถอดรหัสURI() ” วิธีการหรือใช้นิพจน์ทั่วไป