Panjang string dalam byte di JavaScript

Dalam kode JavaScript saya, saya perlu menulis pesan ke server dalam format ini:

<size in bytes>CRLF
<data>CRLF

Contoh:

3
foo

Data mungkin berisi karakter unicode. Saya perlu mengirimnya sebagai UTF-8.

Saya mencari cara paling lintas browser untuk menghitung panjang string dalam byte di JavaScript.

Saya sudah mencoba ini untuk menyusun muatan saya:

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

Tapi itu tidak memberi saya hasil yang akurat untuk browser lama (atau, mungkin string di browser tersebut di UTF-16?).

Ada petunjuk?

Memperbarui:

Contoh: panjang dalam byte dari string ЭЭХ! Naïve?di UTF-8 adalah 15 byte, tetapi sebagai gantinya beberapa browser melaporkan 23 byte.

Tidak ada cara untuk melakukannya di JavaScript secara native. (Lihat jawaban Riccardo Galli untuk pendekatan modern.)

Untuk referensi historis atau di mana API TextEncoder masih tidak tersedia .

Jika Anda mengetahui pengkodean karakter, Anda dapat menghitungnya sendiri.

encodeURIComponent mengasumsikan UTF-8 sebagai pengkodean karakter, jadi jika Anda membutuhkan pengkodean itu, Anda dapat melakukannya,

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);
}

Ini seharusnya berfungsi karena cara UTF-8 mengkodekan urutan multi-byte. Byte pertama yang dikodekan selalu dimulai dengan bit nol tinggi untuk urutan byte tunggal, atau byte yang digit hex pertamanya adalah C, D, E, atau F. Byte kedua dan selanjutnya adalah byte yang dua bit pertamanya adalah 10 Itu adalah byte ekstra yang ingin Anda hitung dalam UTF-8.

Tabel di wikipedia membuatnya lebih jelas

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
...

Jika Anda perlu memahami pengkodean halaman, Anda dapat menggunakan trik ini:

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);
}

Tahun-tahun berlalu dan saat ini Anda dapat melakukannya secara native

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

Perhatikan bahwa itu belum didukung oleh IE (atau Edge) (Anda dapat menggunakan polyfill untuk itu).

Dokumentasi MDN

Spesifikasi standar

Berikut adalah versi yang jauh lebih cepat, yang tidak menggunakan ekspresi reguler, atau 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;
}

Berikut perbandingan performanya .

Ini hanya menghitung panjang dalam UTF8 dari setiap titik kode unicode yang dikembalikan oleh charCodeAt () (berdasarkan deskripsi wikipedia tentang UTF8 , dan karakter pengganti UTF16).

Ini mengikuti RFC3629 (di mana karakter UTF-8 paling panjang 4-byte).

Untuk pengkodean UTF-8 sederhana, dengan kompatibilitas yang sedikit lebih baik daripada TextEncoder, Blob melakukan triknya. Tidak akan berfungsi di browser yang sangat lama.

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

Fungsi ini akan mengembalikan ukuran byte dari setiap string UTF-8 yang Anda berikan padanya.

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

Sumber

Pendekatan lain yang sangat sederhana menggunakan Buffer(hanya untuk NodeJS):

Buffer.byteLength(string, 'utf8')

Buffer.from(string).length

Butuh beberapa saat bagi saya untuk menemukan solusi untuk React Native jadi saya akan taruh di sini:

Pertama instal bufferpaketnya:

npm install --save buffer

Kemudian gunakan metode node:

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

Sebenarnya, saya menemukan apa yang salah. Agar kode berfungsi, halaman <head>harus memiliki tag ini:

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

Atau, seperti yang disarankan dalam komentar, jika server mengirimkan Content-Encodingheader HTTP , seharusnya juga berfungsi.

Kemudian hasil dari browser yang berbeda menjadi konsisten.

Berikut ini contohnya:

<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>

Catatan: Saya menduga bahwa menentukan pengkodean (akurat) apa pun akan memperbaiki masalah pengkodean. Saya hanya kebetulan membutuhkan UTF-8.

Berikut adalah metode independen dan efisien untuk menghitung byte UTF-8 dari sebuah string.

//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));

Perhatikan bahwa metode ini dapat memunculkan kesalahan jika string input berformat UCS-2 salah

Di NodeJS, Buffer.byteLengthadalah metode yang khusus untuk tujuan ini:

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

Perhatikan bahwa secara default metode ini mengasumsikan string dalam encoding UTF-8. Jika encoding berbeda diperlukan, teruskan sebagai argumen kedua.

Ini akan bekerja untuk karakter BMP dan 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. 

Anda bisa mencoba ini:

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

Ini bekerja untuk saya.