Zeichenfolgenlänge in Bytes in JavaScript

In meinem JavaScript-Code muss ich eine Nachricht an den Server in diesem Format verfassen:

<size in bytes>CRLF
<data>CRLF

Beispiel:

3
foo

Die Daten können Unicode-Zeichen enthalten. Ich muss sie als UTF-8 senden.

Ich suche nach der browserübergreifendsten Methode, um die Länge der Zeichenfolge in Byte in JavaScript zu berechnen.

Ich habe dies versucht, um meine Nutzlast zusammenzustellen:

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

Aber es gibt mir keine genauen Ergebnisse für die älteren Browser (oder vielleicht die Zeichenfolgen in diesen Browsern in UTF-16?).

Irgendwelche Hinweise?

Aktualisieren:

Beispiel: Die Länge der Zeichenfolge ЭЭХ! Naïve?in UTF-8 in Byte beträgt 15 Byte. Einige Browser melden jedoch stattdessen 23 Byte.

Es gibt keine Möglichkeit, dies nativ in JavaScript zu tun. (Siehe Riccardo Gallis Antwort für einen modernen Ansatz.)

Zur historischen Bezugnahme oder wenn TextEncoder-APIs noch nicht verfügbar sind .

Wenn Sie die Zeichenkodierung kennen, können Sie sie jedoch selbst berechnen.

encodeURIComponent nimmt UTF-8 als Zeichencodierung an. Wenn Sie diese Codierung benötigen, können Sie Folgendes tun:

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

Dies sollte aufgrund der Art und Weise funktionieren, wie UTF-8 Mehrbyte-Sequenzen codiert. Das erste codierte Byte beginnt immer entweder mit einem hohen Bit von Null für eine einzelne Bytesequenz oder mit einem Byte, dessen erste hexadezimale Ziffer C, D, E oder F ist. Das zweite und nachfolgende Byte sind diejenigen, deren erste zwei Bits 10 sind Dies sind die zusätzlichen Bytes, die Sie in UTF-8 zählen möchten.

Die Tabelle in Wikipedia macht es klarer

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

Wenn Sie stattdessen die Seitencodierung verstehen müssen, können Sie diesen Trick verwenden:

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

Jahre vergingen und heutzutage kann man es nativ machen

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

Beachten Sie, dass es vom IE (oder Edge) noch nicht unterstützt wird (Sie können dafür eine Polyfüllung verwenden ).

MDN-Dokumentation

Standardspezifikationen

Hier ist eine viel schnellere Version, die weder reguläre Ausdrücke noch encodeURIComponent () verwendet :

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

Hier ist ein Leistungsvergleich .

Es berechnet lediglich die Länge aller von charCodeAt () zurückgegebenen Unicode-Codepunkte in UTF8 (basierend auf den Wikipedia-Beschreibungen von UTF8 und UTF16-Ersatzzeichen ).

Es folgt RFC3629 (wobei UTF-8-Zeichen höchstens 4 Byte lang sind).

Für eine einfache UTF-8-Codierung mit etwas besserer Kompatibilität als TextEncoderBlob ist dies der Trick. Funktioniert jedoch nicht in sehr alten Browsern.

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

Diese Funktion gibt die Bytegröße aller UTF-8-Zeichenfolgen zurück, die Sie an sie übergeben.

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

Quelle

Ein weiterer sehr einfacher Ansatz Buffer(nur für NodeJS):

Buffer.byteLength(string, 'utf8')

Buffer.from(string).length

Ich habe eine Weile gebraucht , um eine Lösung für React Native zu finden, also werde ich sie hier einfügen :

Installieren Sie zuerst das bufferPaket:

npm install --save buffer

Verwenden Sie dann die Knotenmethode:

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

Eigentlich habe ich herausgefunden, was los ist. Damit der Code funktioniert, sollte die Seite <head>dieses Tag haben:

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

Wenn der Server einen HTTP- Content-EncodingHeader sendet , sollte dies auch funktionieren , wie in den Kommentaren vorgeschlagen .

Dann sind die Ergebnisse von verschiedenen Browsern konsistent.

Hier ist ein Beispiel:

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

Hinweis: Ich vermute, dass die Angabe einer (genauen) Codierung das Codierungsproblem beheben würde. Es ist nur ein Zufall, dass ich UTF-8 brauche.

Hier ist eine unabhängige und effiziente Methode zum Zählen von UTF-8-Bytes einer Zeichenfolge.

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

Beachten Sie, dass die Methode möglicherweise einen Fehler auslöst, wenn eine Eingabezeichenfolge fehlerhaft ist

In NodeJS Buffer.byteLengthist eine Methode speziell für diesen Zweck:

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

Beachten Sie, dass die Methode standardmäßig davon ausgeht, dass die Zeichenfolge in UTF-8-Codierung vorliegt. Wenn eine andere Codierung erforderlich ist, übergeben Sie diese als zweites Argument.

Dies würde für BMP- und SIP / SMP-Zeichen funktionieren.

    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. 

Sie können dies versuchen:

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

Für mich geht das.