TextEncoder: encodeInto() ã¡ã½ãã
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2021å¹´4æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
TextEncoder.encodeInto() ã¡ã½ããã¯ãã¨ã³ã³ã¼ãããæååã¨ã UTF-8 ã¨ã³ã³ã¼ãå¾ã®ããã¹ãæ ¼ç´å
ã¨ãªã Uint8Array ãåãåããã¨ã³ã³ã¼ãã®é²è¡ç¶æ³ã示ãè¾æ¸ãªãã¸ã§ã¯ããè¿ãã¾ãã
ããã¯å¤ã encode() ã¡ã½ãããããæ½å¨çã«æ§è½ãé«ããç¹ã«ã¿ã¼ã²ãããããã¡ã¼ã WASM ãã¼ãã¸ã®ãã¥ã¼ã§ããå ´åããã广çã§ãã
æ§æ
encodeInto(string, uint8Array)
弿°
string-
ã¨ã³ã³ã¼ãããããã¹ããå ¥ã£ãæååã§ãã
uint8Array-
Uint8Arrayãªãã¸ã§ã¯ãã®ã¤ã³ã¹ã¿ã³ã¹ã§ãçµæã® UTF-8 ã¨ã³ã³ã¼ããããããã¹ããå ¥ãã¾ãã
è¿å¤
2 ã¤ã®ã¡ã³ãã¼ãæã¤ãªãã¸ã§ã¯ãã§ãã
read-
ã½ã¼ã¹ãã UTF-8 ã¸å¤æãããã UTF-16 åä½ã®ã³ã¼ãã®æ°ã ããã¯ã
uint8Arrayã«ååãªã¹ãã¼ã¹ããªãå ´åãstring.lengthãããå°ãããªãå¯è½æ§ãããã¾ãã written-
å®å ã®
Uint8Arrayã§å¤æ´ããããã¤ãæ°ã æ¸ãè¾¼ã¾ãããã¤ãåã¯ãå®å ¨ãª UTF-8 ãã¤ãåãå½¢æãããã¨ãä¿è¨¼ããã¾ãã
ç¹å®ã®ä½ç½®ã«ã¨ã³ã³ã¼ã
encoder.encodeInto() ã¯å¸¸ã«é
åã®å
é ã«åºåãè¡ãã¾ãã
ããããªãããåºåãç¹å®ã®ä½ç½®ããéå§ã§ããã¨ä¾¿å©ãªãã¨ãããã¾ãã
ãã㯠TypedArray.prototype.subarray() ã§è§£æ±ºã§ãã¾ããã覧ãã ããã
const encoder = new TextEncoder();
function encodeIntoAtPosition(string, u8array, position) {
return encoder.encodeInto(
string,
position ? u8array.subarray(position | 0) : u8array,
);
}
const u8array = new Uint8Array(8);
encodeIntoAtPosition("hello", u8array, 2);
console.log(u8array.join()); // 0,0,104,101,108,108,111,0
ãããã¡ã¼ã®å¤§ãã
JavaScript ã®æåå s ã夿ããããã«ãå®å
¨ãªå¤æã«å¿
è¦ãªåºåé å㯠s.length ãã¤ãããå°ãããªããã¨ã¯ãªãã s.length * 3 ãã¤ããã大ãããªããã¨ã¯ããã¾ããã
ããåºåã®å²ãå½ã¦ï¼å
¸åçã«ã¯ WASM ãã¼ãå
ï¼ãçæéã§ãããã¨ãäºæ³ãããå ´åãåºåã« s.length * 3 ãã¤ããå²ãå½ã¦ããã¨ã¯çã«ããªã£ã¦ããããã®å ´åãæåã®å¤æã®è©¦è¡ã§æååå
¨ä½ã夿ãããã¨ãä¿è¨¼ããã¦ãã¾ãã
æåå㯠3 ãã¤ãã«å±éãããããã¤ãã®æåã§ããã¯ããããã¨ã«ãªãã®ã§ã s.length * 3 ã«ãªããã¨ã¯ã¾ãã§ãããã¨ã«æ³¨æãã¦ãã ããã
é·ãããã¹ãã s.length * 2 ãã¤ãã®é·ããè¶
ãããã¨ã¯ã¾ããªãã§ãããã
ãããã£ã¦ãããæ¥½è¦³çãªã¢ããã¼ãã¨ãã¦ã¯ã s.length * 2 + 5 ãã¤ããå²ãå½ã¦ã¦ã楽観çãªäºæ¸¬ãééã£ã¦ããã¨ããç¨ãªç¶æ³ä¸ã§åå²ãå½ã¦ãå®è¡ãããã¨ã§ãããã
åºåçµæã®å¯¿å½ãé·ãã¨è¦è¾¼ã¾ããå ´åãæå°å²ãå½ã¦ãµã¤ãº roundUpToBucketSize(s.length) ã¨æå¤§å²ãå½ã¦ãµã¤ãº s.length * 3 ãè¨ç®ããï¼ã¡ã¢ãªã¼ä½¿ç¨éã¨é度ã®ãã¬ã¼ããªãã¨ãã¦ï¼é¸æããé¾å¤ t ãç¨æãã roundUpToBucketSize(s.length) + t >= s.length * 3 ãªãã s.length * 3 ã«å¯¾ãã¦å²ãå½ã¦ãã¨ãã£ããã¨ã¯çã«ããªã£ã¦ãã¾ãã
ããã§ãªãå ´åã¯ãã¾ã roundUpToBucketSize(s.length) ã確ä¿ãã夿ãã¾ãã
è¿å¤ã®è¾æ¸ã«ãã read ã¢ã¤ãã ã s.length ã§ããã°ã夿ã¯å®äºã§ãã
ããã§ãªãå ´åã¯ãã¿ã¼ã²ãããããã¡ã¼ã written + (s.length - read) * 3 ã«åå²ãå½ã¦ããread ã®ä½ç½®ããå§ã¾ã s 㨠written ã®ä½ç½®ããå§ã¾ãã¿ã¼ã²ãããããã¡ã¼ã®ãµããããã¡ã¼ãåå¾ãã¦ãæ®ãã夿ãã¾ãã
ä¸è¨ã® roundUpToBucketSize() ã¯ã¢ãã±ã¼ã¿ã¼ã®ãã±ãããµã¤ãºã«åãä¸ãã颿°ã§ãã
ãã¨ãã°ãWasm ã®ã¢ãã±ã¼ã¿ã¼ã 2 ã®ã¹ãä¹ã®ãã±ããã使ããã¨ãããã£ã¦ããå ´åã roundUpToBucketSize() ã¯å¼æ°ã 2 ã®ã¹ãä¹ã§ããã°ãããè¿ããããã§ãªããã°æ¬¡ã® 2 ã®ã¹ãä¹ãè¿ãããã«ãã¾ãã
Wasm ã¢ãã±ã¼ã¿ã¼ã®æåã䏿ãªå ´åã¯ã roundUpToBucketSize() ãæç颿°ã«ããå¿
è¦ãããã¾ãã
ã¢ãã±ã¼ã¿ã¼ã®æåã䏿ãªå ´åãæå¤§ã§ 2 åã®åå²ãå½ã¦ãè¡ããæåã®åå²ãå½ã¦ã§ã¯ãæªå¤æã®æ®ãã®é·ãã 3 åã§ã¯ãªã 2 åã«ãããã¨ãã§ãã¾ãã
ãããããã®å ´åããã§ã«æ¸ãè¾¼ã¾ãããããã¡ã¼ã®é·ãã 2 åãããããªé常ã®å®è£
ã¯æå³ãããã¾ããããã®ãããªå ´åã 2 åç®ã®åå²ãå½ã¦ãçºçããã¨ã常ã«å
ã®é·ãã« 3 åããé·ãã¨æ¯è¼ãã¦å²ãå½ã¦åæ°ãå¤ããªã£ã¦ãã¾ãããã§ãã
ä¸è¨ã®ã¢ããã¤ã¹ã¯ãã¼ãçµç«¯ã®ããã®ã¹ãã¼ã¹ãå²ãå½ã¦ãå¿
è¦ããªããã¨ãåæã¨ãã¦ãã¾ãã
ã¤ã¾ããWASM å´ã§ã¯ Rust ã®æååããã¼ãçµç«¯ã§ãªã C++ ã®ã¯ã©ã¹ã使ã£ã¦ãããã¨ã«ãªãã¾ãã
C++ ã® std::string ã使ç¨ãã¦ããå ´åã¯ãè«çé·ã表示ããã¦ãã¦ãã ã¢ãã±ã¼ã¿ã¼ãã±ãããµã¤ãºã¸ã®ä¸¸ãã®è¨ç®æã«ä½åãªã¿ã¼ããã¼ã¿ãã¤ããèæ
®ããå¿
è¦ãããã¾ãã
C ã®æååã«ã¤ãã¦ã¯ã次ã®ç¯ãåç
§ãã¦ãã ããã
ã¼ãçµç«¯ãªã
å
¥åæååã« U+0000 ã¨ããæåãå«ã¾ãã¦ããå ´åãencodeInto() ã¯åºåã« 0x00 ã®ãã¤ããæ¸ãè¾¼ã¿ã¾ãã
encodeInto() ã¯è«çåºåã®å¾ã« C å½¢å¼ã® 0x00 çµç«¯æåã®ãã¤ããæ¸ãè¾¼ã¿ã¾ããã
ããèªåã® Wasm ããã°ã©ã ã C ã®æååã使ã£ã¦ãããªãã0x00 ã®çµç«¯æåãæ¸ãã®ã¯èªåã®è²¬ä»»ã§ã JavaScript ã®æååã U+0000 ãå«ãã§ããã°ãèªåã® Wasm ããã°ã©ã ãè«ççã«åãè©°ããããæååã¨ãã¦æ±ããã¨ãé²ããã¨ãã§ãã¾ããã
ã覧ãã ããã
const encoder = new TextEncoder();
function encodeIntoWithSentinel(string, u8array, position) {
const stats = encoder.encodeInto(
string,
position ? u8array.subarray(position | 0) : u8array,
);
if (stats.written < u8array.length) u8array[stats.written] = 0; // append null if room
return stats;
}
ä¾
<p class="source">This is a sample paragraph.</p>
<p class="result"></p>
const sourcePara = document.querySelector(".source");
const resultPara = document.querySelector(".result");
const string = sourcePara.textContent;
const textEncoder = new TextEncoder();
const utf8 = new Uint8Array(string.length);
const encodedResults = textEncoder.encodeInto(string, utf8);
resultPara.textContent +=
`Bytes read: ${encodedResults.read}` +
` | Bytes written: ${encodedResults.written}` +
` | Encoded result: ${utf8}`;
仿§æ¸
| 仿§æ¸ |
|---|
| Encoding > # ref-for-dom-textencoder-encodeintoâ > |
ãã©ã¦ã¶ã¼ã®äºææ§
é¢é£æ å ±
- æå±å
ã®
TextEncoderã¤ã³ã¿ã¼ãã§ã¤ã¹ã TextEncoder.encode()