JavaScript 文字列操作の 4 つの実用的なヒント

序文

文字列はプログラミングの世界で最も基本的かつ重要なデータ型の 1 つであり、JavaScript も例外ではありません。 JavaScript 文字列は不変であり、文字、数字、Unicode で構成できるテキストを保存するのに便利です。 JavaScript には、さまざまな方法で文字列を作成および操作できる組み込み関数が多数用意されています。この記事では、JavaScript 文字列をエレガントに操作するためのヒントをいくつか紹介します。

1. 文字列を分割する

JavaScript の split() メソッドは、指定された区切り文字列を使用して String オブジェクトを部分文字列の配列に分割し、指定された分割文字列を使用して各分割の位置を決定します。 2 つのオプションパラメータ (区切り文字とオプションの制限数) を使用すると、文字列は文字または部分文字列の配列に変換されます。区切り文字を設定しないと、完全な文字列が配列で返されます。区切り文字には、単一の文字、文字列、または正規表現を使用できます。以下は、正規表現を使用して、コンマとスペースで文字列を分割するコードです。

const title = "4 つの JavaScript 文字列トリック";
console.log(title.split(/[\s+，/]+/)); // ['4', 'JavaScript', '文字列スキル']
console.log(title.split(/[\s+，/]+/, 2)); // [ '4', 'JavaScript' ]

split() 関数によって分割された文字列は、join("") を使用するだけで結合できます。

2. JSONのフォーマットと解析

JSON は JavaScript 専用のデータ型ではなく、フロントエンドとバックエンドのデータ相互作用に広く使用されています。 JSON.stringify() 関数は、オブジェクトを JSON 形式の文字列に変換するために使用されます。通常は、次のようにオブジェクトをパラメータとして渡すだけです。

定数記事 = {
    タイトル: 「JavaScript 文字列スキル」、
    閲覧数: 30000,
    コメント: null、
    内容: 未定義、
};
記事を文字列化する 

console.log(strArticle); // {"title":"JavaScript 文字列スキル","view":30000,"comments":null}

上記のコードからわかるように、未定義の値は stringify でフィルタリングされますが、null 値はフィルタリングされません。

JSON.stringify() は 2 つのオプションパラメータを受け入れることができます。2 つ目は、印刷するキーの配列またはそれらをクリアする関数を指定できる置き換え子です。次のコード:

console.log(JSON.stringify(article, ["title", "comments"])); // {"title":"JavaScript 文字列テクニック","comments":null}
console.log(JSON.stringify(article, [])); // {}

巨大な JSON の場合、長い配列を渡すと読みやすさと効率性に影響する可能性があります。したがって、次のように置換関数を設定し、スキップするキーに対して undefined を返すことができます。

const 結果 = JSON.stringify(記事、(キー、値) =>
    キー === "タイトル" ? 未定義: 値
);
console.log(結果); // {"view":30000,"comments":null}

JSON.stringify() の 3 番目の引数は、インデントを指定して JSON をフォーマットします (ネストされたブロックで役立ちます)。インデントの間隔を設定する数値を渡したり、スペースを置き換える文字列を渡したりすることもできます。次のコード:

console.log(JSON.stringify(article, ["title"], "\t"));

出力は次の形式になります。

{
"title": "JavaScript 文字列トリック"
}

JSON 文字列を受け取って JavaScript オブジェクトに変換する JSON.parse() 関数もあります。また、オブジェクトのプロパティをインターセプトし、値を返す前にプロパティ値を変更できる reviver 関数も受け入れます。

const reviver = (key, value) => (key === "view" ? 0 : value);

var jsonString = JSON.stringify(article);
var jsonObj = JSON.parse(jsonString, reviver);

console.log(jsonObj); // { title: 'JavaScript 文字列テクニック', view: 0, comments: null }

3. 複数行の文字列と埋め込み式

JavaScript で文字列を作成するには、一重引用符 ('')、二重引用符 ("")、またはバックティック (キーボードの左上、1 の左側) を使用する 3 つの方法があります。

const country1 = "中国";
const country2 = "中国";
const country3 = `中国`;

最初の 2 つは基本的に同じ方法で作成され、組み合わせて引用符で囲まれた文字列を連結または追加することができます (反対の構文スタイルを使用)。一方、バックティックを使用すると、文字列の凝った強力な操作が可能になります。

バックティックはテンプレートリテラルとも呼ばれます。バックティックは複数行の文字列を作成したり、式を埋め込んだりするのに便利です。 JavaScript で文字列補間を使用して複数行の文字列を作成する方法は次のとおりです。

定数年 = "2021";
月 = 7;
定数日 = 2;
const detail = `今日は${year}${month}${day}です。
いい日だ！ `;

console.log(詳細);

出力結果も次のように折り返されます。

今日は2021年7月2日です。
いい日だ！

文字列リテラルに加えて、${} 内では任意の有効な式が許可されます。これは、関数呼び出しや式、ネストされたテンプレートであってもかまいません。
タグ付きテンプレートは、埋め込まれた式を引数として持つ関数を使用してテンプレートリテラルを解析できるようにする、テンプレートリテラルの高度な形式です。次のコード:

const title = "JavaScript 文字列のヒント";
ビュー = 30000;

const 詳細 = (テキスト、タイトル表現、ビュー表現) => {
    const [文字列1, 文字列2, 文字列3] = [...テキスト];
    `${string1}${titleExp}${string2}${viewExp}${string3}` を返します。
};

const intro = detail`この記事のタイトルは「${title}」で、現在読んでいる巻は「${view}」です`;

console.log(intro); // 記事のタイトルは「JavaScript 文字列スキル」で、現在の読書量は 30000 です

4. 文字列配列に部分文字列が存在するかどうかを確認する

ES6 では、JavaScript 文字列に部分文字列が存在するかどうかを簡単に見つけることができます。includes 関数を使用するだけです。

ただし、データ内に文字列が存在するかどうかを確認する必要があります。メイン配列の項目の 1 つに文字列が含まれている場合は、true を返します。どちらにも含まれていない場合は、false を返します。したがって、次のコードに示すように、some 関数を include と一緒に使用する必要があります。

const arrayTitles = ["Javascript", "EScript", "Golang"];
const hasText = (配列、findText) =>
    配列.some((item) => item.includes(findText));

console.log(hasText(arrayTitles, "script")); // true
console.log(hasText(arrayTitles, "php")); // false

要約する

JavaScript の文字列操作はプロジェクトでよく使われる操作です。上記の 4 つのヒントは学んで実際の開発に適用する価値があります。

これで、JavaScript 文字列操作の 4 つの実用的なヒントに関するこの記事は終了です。より関連性の高い JS 文字列操作のヒントについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: