はじめに
この実験では、JavaScript を使用して文字列のバイトサイズを計算する方法を探ります。データ転送、ストレージ計算、またはデータサイズが重要な API 制限などの作業を行う際に、文字列のバイトサイズを理解することは不可欠です。
文字列から Blob
オブジェクトに変換し、そのプロパティを使用して正確なバイトサイズを決定する方法を学びます。この手法は、ファイルアップロード、ネットワークリクエスト、またはデータストレージの最適化を扱うウェブ開発で一般的に使用されます。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、JavaScript を使用して文字列のバイトサイズを計算する方法を探ります。データ転送、ストレージ計算、またはデータサイズが重要な API 制限などの作業を行う際に、文字列のバイトサイズを理解することは不可欠です。
文字列から Blob
オブジェクトに変換し、そのプロパティを使用して正確なバイトサイズを決定する方法を学びます。この手法は、ファイルアップロード、ネットワークリクエスト、またはデータストレージの最適化を扱うウェブ開発で一般的に使用されます。
文字列のバイトサイズを計算する前に、JavaScript で文字列がどのように表現されるかを理解することが重要です。
JavaScript では、文字列は UTF - 16 コードユニットのシーケンスです。これは、絵文字や特定の記号などの文字は、表現に 1 バイト以上を必要とする場合があることを意味します。たとえば、単純な英字は 1 バイトを占めますが、絵文字は 4 バイトを占めることがあります。
まず、ターミナルで Node.js を起動しましょう。
node
これで、次のような Node.js の対話型コンソールに入るはずです。
Welcome to Node.js v14.x.x.
Type ".help" for more information.
>
このコンソールでは、直接 JavaScript コードを試すことができます。次のコマンドを入力して、文字列の長さを確認してみましょう。
"Hello World".length;
次のような出力が表示されるはずです。
11
これは文字数を示していますが、実際のバイトサイズではありません。文字数とバイトサイズは、特に特殊文字が含まれる場合に異なることがあります。次のステップでこれをさらに調べてみましょう。
文字列の表現方法を理解したので、Blob
オブジェクトを使用して文字列の実際のバイトサイズを計算する方法を学びましょう。
Blob
(Binary Large Object、バイナリ大オブジェクト)は、不変の生データを持つファイルのようなオブジェクトを表します。文字列を Blob に変換することで、その size
プロパティにアクセスしてバイトサイズを決定することができます。
Node.js コンソールで、バイトサイズを計算する関数を作成しましょう。
const byteSize = (str) => new Blob([str]).size;
この関数は文字列を入力として受け取り、それを Blob に変換し、バイト単位のサイズを返します。
この関数を簡単な例でテストしてみましょう。
byteSize("Hello World");
次のような出力が表示されるはずです。
11
この場合、「Hello World」は ASCII 文字のみを含んでおり、各文字が 1 バイトで表されるため、文字数とバイトサイズは同じになります。
次に、非 ASCII 文字を使って試してみましょう。
byteSize("😀");
次のような出力が表示されるはずです。
4
これは、絵文字が 1 文字として見えるが、実際には 4 バイトのストレージを占有していることを示しています。
異なるタイプの文字が文字列のバイトサイズにどのように影響するかを調べてみましょう。
Node.js コンソールで、様々な文字列で byteSize
関数をテストしてみましょう。
byteSize("The quick brown fox jumps over the lazy dog");
期待される出力:
43
byteSize("123!@#$%^&*()");
期待される出力:
13
byteSize("Hello, 世界!");
期待される出力:
13
byteSize("😀😃😄😁");
期待される出力:
16
文字タイプが混合されている場合、特に中国語の文字や絵文字などの非 ASCII 文字が含まれると、バイトサイズが文字数よりも大きくなることに注意してください。
国際文字や特殊記号を含む可能性のあるデータを扱う際には、これがストレージ要件やデータ転送サイズに影響するため、理解することが重要です。
次のコマンドを入力して Node.js コンソールを終了しましょう。
.exit
これで通常のターミナルプロンプトに戻ります。
では、JavaScript ファイルを作成して、バイトサイズを計算する関数をより実用的な形で実装しましょう。これにより、この関数を実際のアプリケーションでどのように使用するかがわかります。
WebIDE で新しいファイルを作成します。ファイルエクスプローラーのサイドバーにある「New File」アイコンをクリックし、byteSizeCalculator.js
と名付けます。
以下のコードをファイルに追加します。
/**
* 与えられた文字列のバイトサイズを計算します。
* @param {string} str - バイトサイズを計算する文字列。
* @returns {number} バイト単位のサイズ。
*/
function calculateByteSize(str) {
return new Blob([str]).size;
}
// 異なるタイプの文字列の例
const examples = [
"Hello World",
"😀",
"The quick brown fox jumps over the lazy dog",
"123!@#$%^&*()",
"Hello, 世界!",
"😀😃😄😁"
];
// 結果を表示する
console.log("String Byte Size Calculator\n");
console.log("String".padEnd(45) + "| Characters | Bytes");
console.log("-".repeat(70));
examples.forEach((example) => {
console.log(
`"${example}"`.padEnd(45) +
`| ${example.length}`.padEnd(12) +
`| ${calculateByteSize(example)}`
);
});
Ctrl+S を押すか、メニューから「File > Save」を選択してファイルを保存します。
ターミナルからファイルを実行します。
node byteSizeCalculator.js
以下のような出力が表示されるはずです。
String Byte Size Calculator
String | Characters | Bytes
----------------------------------------------------------------------
"Hello World" | 11 | 11
"😀" | 1 | 4
"The quick brown fox jumps over the lazy dog" | 43 | 43
"123!@#$%^&*()" | 13 | 13
"Hello, 世界!" | 10 | 13
"😀😃😄😁" | 4 | 16
この表は、異なるタイプの文字列における文字数とバイトサイズの違いを明確に示しています。
これらの違いを理解することは、以下のような場合に重要です。
文字列のバイトサイズ計算の実験を完了し、おめでとうございます。あなたは以下のことを学びました。
Blob
オブジェクトを使用して文字列のバイトサイズを計算する方法この知識は、以下のような場面で役立ちます。
文字列のバイトサイズを理解することで、特に国際文字、絵文字、特殊記号を扱う際に、アプリケーションがデータの保存と転送を正しく管理することができます。