Longueur de chaîne en octets en JavaScript

Dans mon code JavaScript, j'ai besoin de composer un message au serveur dans ce format:

<size in bytes>CRLF
<data>CRLF

Exemple:

3
foo

Les données peuvent contenir des caractères Unicode. Je dois les envoyer en UTF-8.

Je recherche le moyen le plus polyvalent pour calculer la longueur de la chaîne en octets en JavaScript.

J'ai essayé ceci pour composer ma charge utile:

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

Mais cela ne me donne pas de résultats précis pour les anciens navigateurs (ou peut-être les chaînes de ces navigateurs en UTF-16?).

Des indices?

Mettre à jour:

Exemple: la longueur en octets de la chaîne ЭЭХ! Naïve?en UTF-8 est de 15 octets, mais certains navigateurs rapportent 23 octets à la place.

Il n'y a aucun moyen de le faire en JavaScript de manière native. (Voir la réponse de Riccardo Galli pour une approche moderne.)

Pour référence historique ou lorsque les API TextEncoder ne sont toujours pas disponibles .

Si vous connaissez le codage des caractères, vous pouvez le calculer vous-même.

encodeURIComponent suppose UTF-8 comme encodage de caractères, donc si vous avez besoin de cet encodage, vous pouvez faire,

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

Cela devrait fonctionner en raison de la façon dont UTF-8 encode les séquences multi-octets. Le premier octet codé commence toujours par soit un bit haut de zéro pour une séquence à un octet, soit un octet dont le premier chiffre hexadécimal est C, D, E ou F.Le deuxième octet et les suivants sont ceux dont les deux premiers bits sont 10 Ce sont les octets supplémentaires que vous voulez compter en UTF-8.

La table dans wikipedia le rend plus clair

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

Si à la place vous avez besoin de comprendre l'encodage de la page, vous pouvez utiliser cette astuce:

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

Les années ont passé et de nos jours vous pouvez le faire nativement

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

Notez qu'il n'est pas encore pris en charge par IE (ou Edge) (vous pouvez utiliser un polyfill pour cela).

Documentation MDN

Spécifications standard

Voici une version beaucoup plus rapide, qui n'utilise pas d'expressions régulières, ni 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;
}

Voici une comparaison des performances .

Il calcule simplement la longueur en UTF8 de chaque codet Unicode retourné par charCodeAt () (basé sur les descriptions de wikipedia de UTF8 caractères de substitution et UTF16).

Il suit la RFC3629 (où les caractères UTF-8 font au plus 4 octets de long).

Pour un encodage UTF-8 simple, avec une compatibilité légèrement meilleure que TextEncoder, Blob fait l'affaire. Ne fonctionnera pas dans les très vieux navigateurs.

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

Cette fonction renverra la taille d'octet de toute chaîne UTF-8 que vous lui passez.

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

La source

Une autre approche très simple utilisant Buffer(uniquement pour NodeJS):

Buffer.byteLength(string, 'utf8')

Buffer.from(string).length

Il m'a fallu un certain temps pour trouver une solution pour React Native donc je vais la mettre ici:

Installez d'abord le bufferpackage:

npm install --save buffer

Ensuite, utilisez la méthode du nœud:

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

En fait, j'ai compris ce qui ne va pas. Pour que le code fonctionne, la page <head>doit avoir cette balise:

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

Ou, comme suggéré dans les commentaires, si le serveur envoie HTTP Content-Encoding tête , cela devrait également fonctionner.

Ensuite, les résultats de différents navigateurs sont cohérents.

Voici un exemple:

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

Remarque: je soupçonne que la spécification d' un encodage (précis) résoudrait le problème d'encodage. C'est juste une coïncidence que j'ai besoin d'UTF-8.

Voici une méthode indépendante et efficace pour compter les octets UTF-8 d'une chaîne.

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

Notez que la méthode peut générer une erreur si une chaîne d'entrée est malformée UCS-2

Dans NodeJS, Buffer.byteLengthest une méthode spécifiquement à cet effet:

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

Notez que par défaut, la méthode suppose que la chaîne est en codage UTF-8. Si un codage différent est requis, passez-le comme deuxième argument.

Cela fonctionnerait pour les caractères BMP et 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. 

Vous pouvez essayer ceci:

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

Ça marche pour moi.