Độ dài chuỗi tính bằng byte trong JavaScript

Trong mã JavaScript của mình, tôi cần soạn tin nhắn tới máy chủ ở định dạng sau:

<size in bytes>CRLF
<data>CRLF

Thí dụ:

3
foo

Dữ liệu có thể chứa các ký tự unicode. Tôi cần gửi chúng dưới dạng UTF-8.

Tôi đang tìm cách nhiều trình duyệt nhất để tính độ dài của chuỗi theo byte trong JavaScript.

Tôi đã thử điều này để soạn tải trọng của mình:

return unescape(encodeURIComponent(str)).length + "\n" + str + "\n"

Nhưng nó không cung cấp cho tôi kết quả chính xác cho các trình duyệt cũ hơn (hoặc, có thể các chuỗi trong các trình duyệt đó trong UTF-16?).

Bất kì manh mối nào?

Cập nhật:

Ví dụ: độ dài tính bằng byte của chuỗi ЭЭХ! Naïve?trong UTF-8 là 15 byte, nhưng một số trình duyệt lại báo cáo là 23 byte.

Không có cách nào để làm điều đó trong JavaScript nguyên bản. (Xem câu trả lời của Riccardo Galli để biết cách tiếp cận hiện đại.)

Để tham khảo lịch sử hoặc nơi API TextEncoder vẫn không khả dụng .

Nếu bạn biết mã hóa ký tự, bạn có thể tự tính toán nó.

encodeURIComponent giả sử UTF-8 là mã hóa ký tự, vì vậy nếu bạn cần mã hóa đó, bạn có thể thực hiện,

function lengthInUtf8Bytes(str) {
  // Matches only the 10.. bytes that are non-initial characters in a multi-byte sequence.
  var m = encodeURIComponent(str).match(/%[89ABab]/g);
  return str.length + (m ? m.length : 0);
}

Điều này sẽ hoạt động vì cách UTF-8 mã hóa chuỗi nhiều byte. Byte được mã hóa đầu tiên luôn bắt đầu bằng bit cao bằng 0 đối với chuỗi byte đơn hoặc byte có chữ số hex đầu tiên là C, D, E hoặc F. Các byte thứ hai và các byte tiếp theo là byte có hai bit đầu tiên là 10 . Đó là những byte phụ mà bạn muốn đếm trong UTF-8.

Bảng trong wikipedia làm cho nó rõ ràng hơn

Bits        Last code point Byte 1          Byte 2          Byte 3
  7         U+007F          0xxxxxxx
 11         U+07FF          110xxxxx        10xxxxxx
 16         U+FFFF          1110xxxx        10xxxxxx        10xxxxxx
...

Thay vào đó, nếu bạn cần hiểu mã hóa trang, bạn có thể sử dụng thủ thuật này:

function lengthInPageEncoding(s) {
  var a = document.createElement('A');
  a.href = '#' + s;
  var sEncoded = a.href;
  sEncoded = sEncoded.substring(sEncoded.indexOf('#') + 1);
  var m = sEncoded.match(/%[0-9a-f]{2}/g);
  return sEncoded.length - (m ? m.length * 2 : 0);
}

Nhiều năm trôi qua và ngày nay bạn có thể làm điều đó một cách tự nhiên

(new TextEncoder().encode('foo')).length

Lưu ý rằng nó chưa được hỗ trợ bởi IE (hoặc Edge) (bạn có thể sử dụng polyfill cho điều đó).

Tài liệu MDN

Chi tiết kỹ thuật tiêu chuẩn

Đây là một phiên bản nhanh hơn nhiều, không sử dụng biểu thức chính quy, cũng không encodeURIComponent () :

function byteLength(str) {
  // returns the byte length of an utf8 string
  var s = str.length;
  for (var i=str.length-1; i>=0; i--) {
    var code = str.charCodeAt(i);
    if (code > 0x7f && code <= 0x7ff) s++;
    else if (code > 0x7ff && code <= 0xffff) s+=2;
    if (code >= 0xDC00 && code <= 0xDFFF) i--; //trail surrogate
  }
  return s;
}

Đây là một so sánh hiệu suất .

Nó chỉ tính độ dài theo UTF8 của mỗi điểm mã unicode được trả về bởi charCodeAt () (dựa trên mô tả của wikipedia về UTF8 và các ký tự thay thế UTF16).

Nó tuân theo RFC3629 (trong đó các ký tự UTF-8 có độ dài tối đa là 4 byte).

Đối với mã hóa UTF-8 đơn giản, với khả năng tương thích tốt hơn một chút TextEncoder, Blob thực hiện thủ thuật. Tuy nhiên, sẽ không hoạt động trong các trình duyệt rất cũ.

new Blob(["😀"]).size; // -> 4  

Hàm này sẽ trả về kích thước byte của bất kỳ chuỗi UTF-8 nào mà bạn chuyển cho nó.

function byteCount(s) {
    return encodeURI(s).split(/%..|./).length - 1;
}

Nguồn

Một cách tiếp cận rất đơn giản khác bằng cách sử dụng Buffer(chỉ dành cho NodeJS):

Buffer.byteLength(string, 'utf8')

Buffer.from(string).length

Tôi đã mất một lúc để tìm giải pháp cho React Native nên tôi sẽ đặt nó ở đây:

Đầu tiên cài đặt buffergói:

npm install --save buffer

Sau đó, sử dụng phương thức nút:

const { Buffer } = require('buffer');
const length = Buffer.byteLength(string, 'utf-8');

Trên thực tế, tôi đã tìm ra điều gì sai. Để mã hoạt động, trang <head>phải có thẻ này:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Hoặc, như được đề xuất trong nhận xét, nếu máy chủ gửi Content-Encodingtiêu đề HTTP , nó cũng sẽ hoạt động.

Sau đó, kết quả từ các trình duyệt khác nhau là nhất quán.

Đây là một ví dụ:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>mini string length test</title>
</head>
<body>

<script type="text/javascript">
document.write('<div style="font-size:100px">' 
    + (unescape(encodeURIComponent("ЭЭХ! Naïve?")).length) + '</div>'
  );
</script>
</body>
</html>

Lưu ý: Tôi nghi ngờ rằng việc chỉ định bất kỳ mã hóa (chính xác) nào sẽ khắc phục được sự cố mã hóa. Việc tôi cần UTF-8 chỉ là ngẫu nhiên.

Đây là một phương pháp độc lập và hiệu quả để đếm UTF-8 byte của một chuỗi.

//count UTF-8 bytes of a string
function byteLengthOf(s){
	//assuming the String is UCS-2(aka UTF-16) encoded
	var n=0;
	for(var i=0,l=s.length; i<l; i++){
		var hi=s.charCodeAt(i);
		if(hi<0x0080){ //[0x0000, 0x007F]
			n+=1;
		}else if(hi<0x0800){ //[0x0080, 0x07FF]
			n+=2;
		}else if(hi<0xD800){ //[0x0800, 0xD7FF]
			n+=3;
		}else if(hi<0xDC00){ //[0xD800, 0xDBFF]
			var lo=s.charCodeAt(++i);
			if(i<l&&lo>=0xDC00&&lo<=0xDFFF){ //followed by [0xDC00, 0xDFFF]
				n+=4;
			}else{
				throw new Error("UCS-2 String malformed");
			}
		}else if(hi<0xE000){ //[0xDC00, 0xDFFF]
			throw new Error("UCS-2 String malformed");
		}else{ //[0xE000, 0xFFFF]
			n+=3;
		}
	}
	return n;
}

var s="\u0000\u007F\u07FF\uD7FF\uDBFF\uDFFF\uFFFF";
console.log("expect byteLengthOf(s) to be 14, actually it is %s.",byteLengthOf(s));

Lưu ý rằng phương pháp có thể gây ra lỗi nếu chuỗi đầu vào không đúng định dạng UCS-2

Trong NodeJS, Buffer.byteLengthlà một phương thức dành riêng cho mục đích này:

let strLengthInBytes = Buffer.byteLength(str); // str is UTF-8

Lưu ý rằng theo mặc định, phương pháp này giả định chuỗi ở dạng mã hóa UTF-8. Nếu cần mã hóa khác, hãy chuyển nó làm đối số thứ hai.

Điều này sẽ hoạt động cho các ký tự BMP và SIP / SMP.

    String.prototype.lengthInUtf8 = function() {
        var asciiLength = this.match(/[\u0000-\u007f]/g) ? this.match(/[\u0000-\u007f]/g).length : 0;
        var multiByteLength = encodeURI(this.replace(/[\u0000-\u007f]/g)).match(/%/g) ? encodeURI(this.replace(/[\u0000-\u007f]/g, '')).match(/%/g).length : 0;
        return asciiLength + multiByteLength;
    }

    'test'.lengthInUtf8();
    // returns 4
    '\u{2f894}'.lengthInUtf8();
    // returns 4
    'سلام علیکم'.lengthInUtf8();
    // returns 19, each Arabic/Persian alphabet character takes 2 bytes. 
    '你好，JavaScript 世界'.lengthInUtf8();
    // returns 26, each Chinese character/punctuation takes 3 bytes. 

Bạn có thể thử điều này:

function getLengthInBytes(str) {
  var b = str.match(/[^\x00-\xff]/g);
  return (str.length + (!b ? 0: b.length)); 
}

Nó làm việc cho tôi.