ความยาวสตริงเป็นไบต์ใน JavaScript

Question 1

ในโค้ด 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 ไบต์แทน

Question 2

~~ไม่มีวิธีทำใน JavaScript โดยกำเนิด~~ (ดูคำตอบของ Riccardo Galliสำหรับแนวทางสมัยใหม่)

สำหรับการอ้างอิงประวัติศาสตร์หรือที่ TextEncoder API ที่มียังคงสามารถใช้งานได้

หากคุณรู้จักการเข้ารหัสอักขระคุณสามารถคำนวณได้ด้วยตัวเอง

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

ตารางในwikipediaทำให้ชัดเจนขึ้น

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

Question 3

หลายปีผ่านไปและทุกวันนี้คุณสามารถทำได้โดยกำเนิด

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

โปรดทราบว่า IE (หรือ Edge) ยังไม่รองรับ (คุณอาจใช้ polyfill ก็ได้ )

เอกสาร MDN

ข้อกำหนดมาตรฐาน

Question 4

นี่คือเวอร์ชันที่เร็วกว่ามากซึ่งไม่ใช้นิพจน์ทั่วไปหรือ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 () (ตามคำอธิบายของUTF8และอักขระตัวแทน UTF16 ของวิกิพีเดีย)

เป็นไปตามRFC3629 (โดยที่อักขระ UTF-8 มีความยาวสูงสุด 4 ไบต์)

Question 5

สำหรับการเข้ารหัส UTF-8 แบบธรรมดาที่มีความเข้ากันได้ดีกว่าเล็กน้อยTextEncoderBlob ทำเคล็ดลับ จะไม่ทำงานในเบราว์เซอร์รุ่นเก่ามาก

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

Question 6

ฟังก์ชันนี้จะส่งคืนขนาดไบต์ของสตริง UTF-8 ที่คุณส่งผ่านไป

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

ที่มา

Question 7

อีกวิธีง่ายๆโดยใช้Buffer(สำหรับ NodeJS เท่านั้น):

Buffer.byteLength(string, 'utf8')

Buffer.from(string).length

Question 8

ฉันใช้เวลาสักพักเพื่อหาวิธีแก้ปัญหาสำหรับReact Nativeดังนั้นฉันจะใส่ไว้ที่นี่:

ติดตั้งbufferแพ็คเกจก่อน:

npm install --save buffer

จากนั้นใช้วิธีโหนด:

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

Question 9

อันที่จริงฉันคิดว่ามีอะไรผิดปกติ เพื่อให้โค้ดทำงานหน้า<head>ควรมีแท็กนี้:

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

หรือตามที่แนะนำในความคิดเห็นหากเซิร์ฟเวอร์ส่งContent-Encodingส่วนหัวHTTP ก็ควรใช้งานได้เช่นกัน

จากนั้นผลลัพธ์จากเบราว์เซอร์ต่างๆจะมีความสอดคล้องกัน

นี่คือตัวอย่าง:

<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

Question 10

นี่คือวิธีการที่เป็นอิสระและมีประสิทธิภาพในการนับสตริง 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 ผิดรูปแบบ

Question 11

ใน NodeJS Buffer.byteLengthเป็นวิธีการเฉพาะสำหรับวัตถุประสงค์นี้:

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

โปรดทราบว่าโดยค่าเริ่มต้นวิธีการถือว่าสตริงอยู่ในการเข้ารหัส UTF-8 หากต้องการการเข้ารหัสอื่นให้ส่งผ่านเป็นอาร์กิวเมนต์ที่สอง

Question 12

สิ่งนี้ใช้ได้กับอักขระ 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.

Question 13

คุณสามารถลองสิ่งนี้:

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

มันใช้ได้กับฉัน