Довжина рядка в байтах у JavaScript

У своєму коді JavaScript мені потрібно скласти повідомлення серверу в такому форматі:

<size in bytes>CRLF
<data>CRLF

Приклад:

3
foo

Дані можуть містити символи unicode. Мені потрібно надіслати їх як UTF-8.

Я шукаю найбільш крос-браузерний спосіб обчислити довжину рядка в байтах у JavaScript.

Я спробував це, щоб скласти мій корисний вантаж:

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

Але це не дає мені точних результатів для старих браузерів (або, можливо, рядки в цих браузерах в UTF-16?).

Будь-які підказки?

Оновлення:

Приклад: довжина в байтах рядка ЭЭХ! Naïve?в UTF-8 становить 15 байт, але деякі браузери повідомляють замість цього 23 байти.

Немає способу зробити це в JavaScript на самому собі. (Дивіться відповідь Ріккардо Галлі про сучасний підхід.)

Для історичної довідки або де API API TextEncoder ще недоступні .

Якщо ви знаєте кодування символів, ви можете самі обчислити його.

encodeURIComponent передбачає UTF-8 як кодування символів, тож якщо вам потрібно кодування, ви можете зробити це,

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

Це повинно працювати через те, як UTF-8 кодує багатобайтові послідовності. Перший кодований байт завжди починається або з високого біта нуля для однієї послідовності байт, або з байтом, перший шістнадцятковий розряд якого - C, D, E або F. Другий і наступні байти - це ті, перші два біти яких 10 Це додаткові байти, які ви хочете порахувати в UTF-8.

Таблиця у Вікіпедії робить її більш зрозумілою

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

Якщо замість цього вам потрібно зрозуміти кодування сторінки, ви можете скористатися цим фокусом:

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

Минули роки, і сьогодні ви можете це зробити рідно

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

Зауважте, що він ще не підтримується IE (або Edge) (ви можете використовувати для цього polyfill ).

Документація MDN

Стандартні характеристики

Ось набагато швидша версія, яка не використовує регулярні вирази, ні 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;
}

Ось порівняння продуктивності .

Він просто обчислює довжину в UTF8 кожної кодової точки Unicode, повернуту charCodeAt () (на основі описів у wikipedia UTF8 та сурогатних символів UTF16).

Звідси випливає RFC3629 (де символи UTF-8 мають максимум 4 байти).

Для простого кодування UTF-8, з трохи кращою сумісністю, ніж TextEncoderBlob виконує фокус. Не працює в дуже старих браузерах.

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

Ця функція поверне розмір байта будь-якого рядка UTF-8, який ви передаєте до нього.

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

Джерело

Ще один дуже простий підхід із використанням Buffer(лише для NodeJS):

Buffer.byteLength(string, 'utf8')

Buffer.from(string).length

Зайняв у мене час, щоб знайти рішення для React Native, тому я викладу його тут:

Спочатку встановіть bufferпакет:

npm install --save buffer

Потім скористайтеся методом вузла:

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

Власне, я зрозумів, що не так. Щоб код працював на сторінці, <head>повинен бути цей тег:

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

Або, як пропонується в коментарях, якщо сервер надсилає HTTP- Content-Encodingзаголовок, він також повинен працювати.

Тоді результати різних браузерів відповідають.

Ось приклад:

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

Примітка. Я підозрюю, що визначення будь-якого (точного) кодування вирішить проблему кодування. Це просто збіг обставин, що мені потрібен UTF-8.

Ось незалежний та ефективний метод підрахунку UTF-8 байт рядка.

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

Зауважте, що метод може нанести помилку, якщо вхідна рядок UCS-2 неправильно сформована

У NodeJS Buffer.byteLength- це метод спеціально для цієї мети:

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

Зауважте, що за замовчуванням метод передбачає, що рядок знаходиться в кодуванні UTF-8. Якщо потрібно інше кодування, передайте його як другий аргумент.

Це буде працювати для символів BMP та 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. 

Ви можете спробувати це:

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

Це працює для мене.