UTF-8 là viết tắt của “ Định dạng chuyển đổi Unicode 8-bit ” và tương ứng với định dạng mã hóa tuyệt vời nhằm đảm bảo rằng các ký tự được hiển thị phù hợp trên tất cả các thiết bị bất kể ngôn ngữ/chữ viết được sử dụng. Ngoài ra, định dạng này còn hỗ trợ cho các trang web và được sử dụng để lưu trữ, xử lý và truyền dữ liệu văn bản trên internet.
Hướng dẫn này bao gồm các lĩnh vực nội dung được nêu dưới đây:
- Mã hóa UTF-8 là gì?
- Mã hóa UTF-8 hoạt động như thế nào?
- Giá trị Điểm Mã được tính như thế nào?
- Làm cách nào để mã hóa/giải mã UTF-8 trong JavaScript?
- Mã hóa/Giải mã UTF-8 trong JavaScript bằng cách sử dụng các phương thức “encodeURIComponent()” và “decodeURIComponent()”.
- Mã hóa/Giải mã UTF-8 trong JavaScript bằng cách sử dụng các phương thức “encodeURI()” và “decodeURI()”.
- Mã hóa/Giải mã UTF-8 trong JavaScript bằng cách sử dụng biểu thức chính quy.
- Phần kết luận
Mã hóa UTF-8 là gì?
“ Mã hóa UTF-8 ” là quy trình chuyển đổi chuỗi ký tự Unicode thành chuỗi được mã hóa bao gồm byte 8 bit. Mã hóa này có thể biểu thị một phạm vi lớn các ký tự so với các mã hóa ký tự khác.
Mã hóa UTF-8 hoạt động như thế nào?
Trong khi biểu diễn các ký tự trong UTF-8, mỗi điểm mã riêng lẻ được biểu thị bằng một hoặc nhiều byte. Sau đây là bảng phân tích các điểm mã trong phạm vi ASCII:
- Một byte đơn biểu thị các điểm mã trong phạm vi ASCII (0-127).
- Hai byte biểu thị các điểm mã trong phạm vi ASCII (128-2047).
- Ba byte biểu thị các điểm mã trong phạm vi ASCII (2048-65535).
- Bốn byte biểu thị các điểm mã trong phạm vi ASCII (65536-1114111).
Nó giống như byte đầu tiên của “ UTF-8 ” trình tự được gọi là “ byte dẫn đầu ” cung cấp thông tin về số byte trong chuỗi và giá trị điểm mã của ký tự.
“Byte dẫn đầu” cho chuỗi đơn, hai, ba và bốn byte lần lượt nằm trong phạm vi (0-127), (194-233), (224-239) và (240-247).
Các byte còn lại theo thứ tự được gọi là “ theo sau ” byte. Tất cả các byte cho chuỗi hai, ba và bốn byte đều nằm trong phạm vi (128-191). Như vậy, giá trị điểm mã của ký tự có thể được tính bằng cách phân tích byte đầu và byte cuối.
Giá trị Điểm Mã được tính như thế nào?
Các giá trị điểm mã cho các chuỗi byte khác nhau được tính như sau:
- Chuỗi hai byte: Điểm mã tương đương với “((lb – 194) * 64) + (tb – 128)”.
- Chuỗi ba byte : Điểm mã tương đương với “((lb – 224) * 4096) + ((tb1 – 128) * 64) + (tb2 – 128)”.
- Chuỗi bốn byte : Điểm mã tương đương với “((lb – 240) * 262144) + ((tb1 – 128) * 4096) + ((tb2 – 128) * 64) + (tb3 – 128)”.
Làm cách nào để mã hóa/giải mã UTF-8 trong JavaScript?
Việc mã hóa và giải mã UTF-8 trong JavaScript có thể được thực hiện thông qua các phương pháp nêu dưới đây:
- “ enodeURIComponent() ' Và ' giải mãURIComponent() ” Phương pháp.
- “ mã hóaURI() ' Và ' giải mãURI() ” Phương pháp.
- Biểu thức chính quy.
Cách tiếp cận 1: Mã hóa/Giải mã UTF-8 trong JavaScript bằng cách sử dụng các phương thức “encodeURIComponent()” và “decodeURIComponent()”
Các ' mã hóaURIComponent() ” phương thức mã hóa thành phần URI. Ngoài ra, nó có thể mã hóa các ký tự đặc biệt như @, &, :, +, $, #, v.v. giải mãURIComponent() Tuy nhiên, phương thức này giải mã thành phần URI. Các phương pháp này có thể được sử dụng để mã hóa và giải mã các giá trị được truyền tương ứng thành UTF-8.
Cú pháp(Phương thức “encodeURIComponent()”)
mã hóaURIThành phần ( x )Theo cú pháp đã cho, “ x ” cho biết URI được mã hóa.
Giá trị trả về
Phương thức này truy xuất URI được mã hóa dưới dạng chuỗi.
Cú pháp(Phương thức “decodeURIComponent()”)
giải mãURIThành phần ( x )Đây, ' x ” đề cập đến URI cần được giải mã.
Giá trị trả về
Phương thức này cung cấp URI đã được giải mã.
Ví dụ 1: Mã hóa UTF-8 trong JavaScript
Ví dụ này mã hóa chuỗi đã truyền thành giá trị UTF-8 được mã hóa với sự trợ giúp của hàm do người dùng xác định:
trở lại thoát khỏi ( mã hóaURIThành phần ( x ) ) ;
}
hãy để giá trị = 'đây' ;
bảng điều khiển. nhật ký ( 'Giá trị đã cho ->' + giá trị ) ;
hãy mã hóaVal = mã hóa_utf8 ( giá trị ) ;
bảng điều khiển. nhật ký ( 'Giá trị được mã hóa ->' + mã hóaVal ) ;
Trong các dòng mã này, hãy thực hiện các bước dưới đây:
- Đầu tiên, xác định hàm “ mã hóa_utf8() ” mã hóa chuỗi đã truyền được biểu thị bằng tham số đã chỉ định.
- Việc mã hóa này được thực hiện bởi “ mã hóaURIComponent() ” phương thức trong định nghĩa hàm.
- Ghi chú: Các ' unescape() Phương thức ” thay thế bất kỳ chuỗi thoát nào bằng ký tự được đại diện bởi nó.
- Sau đó, khởi tạo giá trị cần mã hóa và hiển thị nó.
- Bây giờ, hãy gọi hàm đã xác định và chuyển tổ hợp các ký tự đã xác định làm đối số của nó để mã hóa giá trị này thành UTF-8.
đầu ra
Ở đây, có thể ngụ ý rằng các ký tự riêng lẻ được biểu diễn và mã hóa theo UTF-8 tương ứng.
Ví dụ 2: Giải mã UTF-8 trong JavaScript
Trình diễn mã bên dưới giải mã giá trị được truyền (ở dạng ký tự) thành biểu diễn UTF-8 được mã hóa:
trở lại giải mãURIThành phần ( bỏ trốn ( x ) ) ;
}
hãy để giá trị = 'à çè' ;
bảng điều khiển. nhật ký ( 'Giá trị đã cho ->' + giá trị ) ;
hãy giải mã = giải mã_utf8 ( giá trị ) ;
bảng điều khiển. nhật ký ( 'Giá trị được giải mã ->' + giải mã ) ;
Trong khối mã này:
- Tương tự, xác định hàm “ giải mã_utf8() ” giải mã tổ hợp ký tự được truyền qua “ giải mãURIComponent() ' phương pháp.
- Ghi chú: Các ' bỏ trốn() Phương thức ” truy xuất một chuỗi mới trong đó các ký tự khác nhau được thay thế bằng chuỗi thoát thập lục phân.
- Sau đó, chỉ định tổ hợp các ký tự cần giải mã và truy cập vào hàm đã xác định để thực hiện giải mã sang UTF-8 một cách thích hợp.
đầu ra
Ở đây, có thể ngụ ý rằng giá trị được mã hóa trong ví dụ trước được giải mã thành giá trị mặc định.
Cách tiếp cận 2: Mã hóa/Giải mã UTF-8 trong JavaScript bằng cách sử dụng phương thức “encodeURI()” và “decodeURI()”
Các ' mã hóaURI() ” phương thức mã hóa một URI bằng cách thay thế từng phiên bản của nhiều ký tự bằng một số chuỗi thoát biểu thị mã hóa UTF-8 của ký tự. So với “ mã hóaURIComponent() ”, phương thức cụ thể này mã hóa các ký tự giới hạn.
Các ' giải mãURI() Tuy nhiên, phương thức ” giải mã URI(được mã hóa). Các phương pháp này có thể được triển khai kết hợp để mã hóa và giải mã tổ hợp các ký tự trong giá trị được mã hóa UTF-8.
Cú pháp(Phương thức mã hóaURI())
mã hóaURI ( x )Trong cú pháp trên, “ x ” tương ứng với giá trị được mã hóa dưới dạng URI.
Giá trị trả về
Phương thức này lấy giá trị được mã hóa ở dạng chuỗi.
Cú pháp(Phương thức decodeURI())
giải mãURI ( x )Đây, ' x ” đại diện cho URI được mã hóa cần được giải mã.
Giá trị trả về
Nó trả về URI đã giải mã dưới dạng một chuỗi.
Ví dụ 1: Mã hóa UTF-8 trong JavaScript
Phần trình diễn này mã hóa tổ hợp các ký tự được truyền thành giá trị UTF-8 được mã hóa:
trở lại thoát khỏi ( mã hóaURI ( x ) ) ;
}
hãy để giá trị = 'đây' ;
bảng điều khiển. nhật ký ( 'Giá trị đã cho ->' + giá trị ) ;
hãy mã hóaVal = mã hóa_utf8 ( giá trị ) ;
bảng điều khiển. nhật ký ( 'Giá trị được mã hóa ->' + mã hóaVal ) ;
Ở đây, hãy nhớ lại các phương pháp xác định hàm được phân bổ để mã hóa. Bây giờ, hãy áp dụng phương thức “encodeURI()” để biểu thị tổ hợp ký tự được truyền dưới dạng chuỗi được mã hóa UTF-8. Sau đó, tương tự, xác định các ký tự cần đánh giá và gọi hàm đã xác định bằng cách chuyển giá trị đã xác định làm đối số của nó để thực hiện mã hóa.
đầu ra
Ở đây, rõ ràng là tổ hợp ký tự được truyền đã được mã hóa thành công.
Ví dụ 2: Giải mã UTF-8 trong JavaScript
Phần trình diễn mã bên dưới giải mã giá trị UTF-8 được mã hóa (trong ví dụ trước):
trở lại giải mãURI ( bỏ trốn ( x ) ) ;
}
hãy để giá trị = 'à çè' ;
bảng điều khiển. nhật ký ( 'Giá trị đã cho ->' + giá trị ) ;
hãy giải mã = giải mã_utf8 ( giá trị ) ;
bảng điều khiển. nhật ký ( 'Giá trị được giải mã ->' + giải mã ) ;
Theo mã này, khai báo hàm “ giải mã_utf8() ” bao gồm tham số đã nêu biểu thị sự kết hợp của các ký tự được giải mã bằng cách sử dụng “ giải mãURI() ' phương pháp. Bây giờ, hãy chỉ định giá trị cần giải mã và gọi hàm đã xác định để áp dụng giải mã cho “ UTF-8 “ đại diện.
đầu ra
Kết quả này ngụ ý rằng giá trị được mã hóa trước đó được quyết định tương ứng.
Cách tiếp cận 3: Mã hóa/Giải mã UTF-8 trong JavaScript bằng cách sử dụng biểu thức chính quy
Cách tiếp cận này áp dụng mã hóa sao cho chuỗi unicode nhiều byte được mã hóa thành các ký tự nhiều byte đơn UTF-8. Tương tự, việc giải mã được thực hiện sao cho chuỗi được mã hóa được giải mã trở lại các ký tự Unicode nhiều byte.
Ví dụ 1: Mã hóa UTF-8 trong JavaScript
Đoạn mã dưới đây mã hóa chuỗi unicode nhiều byte thành các ký tự một byte UTF-8:
nếu như ( loại giá trị != 'sợi dây' ) ném mới LoạiLỗi ( 'Thông số ' giá trị ' không phải là một chuỗi' ) ;
hằng số chuỗi_utf8 = giá trị. thay thế (
/[\u0080-\u07ff]/g , // U+0080 - U+07FF => 2 byte 110yyyyy, 10zzzzzz
chức năng ( x ) {
đã từng là ngoài = x. charCodeAt ( 0 ) ;
trở lại Sợi dây . từCharCode ( 0xc0 | ngoài >> 6 , 0x80 | ngoài & 0x3f ) ; }
) . thay thế (
/[\u0800-\uffff]/g , // U+0800 - U+FFFF => 3 byte 1110xxxx, 10yyyyyy, 10zzzzzz
chức năng ( x ) {
đã từng là ngoài = x. charCodeAt ( 0 ) ;
trở lại Sợi dây . từCharCode ( 0xe0 | ngoài >> 12 , 0x80 | ngoài >> 6 & 0x3F , 0x80 | ngoài & 0x3f ) ; }
) ;
bảng điều khiển. nhật ký ( 'Giá trị được mã hóa bằng biểu thức chính quy -> ' + chuỗi_utf8 ) ;
}
mã hóaUTF8 ( 'đây' )
Trong đoạn mã này:
- Xác định hàm “ mã hóaUTF8() ” bao gồm tham số đại diện cho giá trị được mã hóa dưới dạng “ UTF-8 ”.
- Theo định nghĩa của nó, hãy áp dụng kiểm tra đối với giá trị được truyền không phải là chuỗi bằng cách sử dụng toán tử “ loại ” và trả về ngoại lệ tùy chỉnh đã chỉ định thông qua toán tử “ ném “từ khóa.
- Sau đó, áp dụng “ charCodeAt() ' Và ' từCharCode() ” để truy xuất Unicode của ký tự đầu tiên trong chuỗi và chuyển đổi giá trị Unicode đã cho thành ký tự tương ứng.
- Cuối cùng, gọi hàm đã xác định bằng cách chuyển chuỗi ký tự đã cho để mã hóa giá trị này dưới dạng “ UTF-8 “ đại diện.
đầu ra
Đầu ra này biểu thị rằng việc mã hóa được thực hiện phù hợp.
Ví dụ 2: Giải mã UTF-8 trong JavaScript
Trong phần trình diễn này, chuỗi ký tự được giải mã thành “ UTF-8 “đại diện:
nếu như ( loại giá trị != 'sợi dây' ) ném mới LoạiLỗi ( 'Thông số ' giá trị ' không phải là một chuỗi' ) ;
hằng số str = giá trị. thay thế (
/[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g ,
chức năng ( x ) {
đã từng là ngoài = ( ( x. charCodeAt ( 0 ) & 0x0f ) << 12 ) | ( ( x. charCodeAt ( 1 ) & 0x3f ) << 6 ) | ( x. charCodeAt ( 2 ) & 0x3f ) ;
trở lại Sợi dây . từCharCode ( ngoài ) ; }
) . thay thế (
/[\u00c0-\u00df][\u0080-\u00bf]/g ,
chức năng ( x ) {
đã từng là ngoài = ( x. charCodeAt ( 0 ) & 0x1f ) < '+str);
}
giải mãUTF8('à çè')
Trong mã này:
- Tương tự, xác định hàm “ giải mãUTF8() ” có tham số đề cập đến giá trị được truyền sẽ được giải mã.
- Trong định nghĩa hàm, hãy kiểm tra điều kiện chuỗi của giá trị được truyền qua lệnh “ loại ' nhà điều hành.
- Bây giờ, hãy áp dụng “ charCodeAt() ” để truy xuất Unicode của các ký tự chuỗi thứ nhất, thứ hai và thứ ba tương ứng.
- Ngoài ra, hãy áp dụng “ String.fromCharCode() ” để chuyển đổi các giá trị Unicode thành ký tự.
- Tương tự, lặp lại quy trình này một lần nữa để tìm nạp Unicode của các ký tự chuỗi thứ nhất và thứ hai rồi chuyển đổi các giá trị unicode này thành ký tự.
- Cuối cùng, truy cập hàm đã xác định để trả về giá trị được giải mã UTF-8.
đầu ra
Ở đây, có thể xác minh rằng việc giải mã được thực hiện chính xác.
Phần kết luận
Việc mã hóa/giải mã dưới dạng biểu diễn UTF-8 có thể được thực hiện thông qua “ enodeURIComponent()” Và ' giải mãURIComponent() các phương pháp, “ mã hóaURI() ' Và ' giải mãURI() ” hoặc sử dụng Biểu thức chính quy.