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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript データ型変換の例 (他の型を文字列、数値型、ブール型に変換する)
  • 文字列から指定された文字を削除または抽出する JavaScript メソッド (非常によく使用されます)

<<:  MySQLにおける(JOIN/ORDER BY)文のクエリ処理と最適化方法

>>:  nginx で Vue プロジェクトをデプロイする方法

推薦する

Linux のファイル権限とグループ変更コマンドの詳細な説明

Linux では、すべてがファイルであり (ディレクトリもファイルです)、各ファイルにはユーザーに対...

Linux ユーザー スクリプトの作成/推測ゲーム/ネットワーク カード トラフィック監視の紹介

目次1. ユーザーが作成したスクリプト2. 単語当てゲーム3. ネットワークカードのトラフィック監視...

vmware workstation12 インストール CentOS プロンプト VMware Player と Device/Credential Guard に互換性がない、理由と解決策

最新バージョンの WIN10 では、Microsoft は仮想化コンテナに基づくセキュリティ メカニ...

Vueは2つのルーティング許可制御メソッドを実装しています

目次方法 1: ルーティング メタ情報 (meta)方法 2: ルーティング テーブルを動的に生成す...

よくある MySQL 設計エラーをご存知ですか?

インターネットの発達により、バスを待ったり地下鉄に乗ったりする時間など、断片的な時間を活用して、いつ...

Angularの動的コンポーネントの詳細な説明

目次使用シナリオ達成方法1. 動的コンポーネントを配置する場所2. コンポーネントのインスタンスを取...

Linux でディスク IO を表示し、読み取りと書き込みで高い IO を占有するプロセスを見つけます。

背景 - オンラインアラートオンライン サーバーがアラームを発し、ディスク使用率 disk.util...

MySQL でスロークエリログ機能を有効にする方法

MySQL スロー クエリ ログは、問題のあるクエリを追跡するのに非常に役立ちます。現在のプログラム...

Linux での Redis の永続性、マスター スレーブ同期、Sentinel の詳細な説明

1.0 Redis の永続性Redis はメモリ内データベースです。サーバー プロセスが終了すると、...

CentOS 7にDockerをインストールする

Linuxシステムをお持ちでない場合は、ダウンロードとインストールについてはhttps://www....

Linux で lvm 論理ボリューム パーティションのサイズを調整するチュートリアル (xfs や ext4 などのさまざまなファイル システム用)

序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...

Linux での tcpdump コマンド例の詳細な説明

序文簡単に言えば、tcpdump は、ネットワーク上のトラフィックをダンプし、ユーザーの定義に従って...

HTML での非同期ファイルアップロードの例

コードをコピーコードは次のとおりです。 <form action="/hehe&qu...

WeChatミニプログラムマップの使い方を詳しく解説

この記事の例では、WeChatアプレットマップで使用される具体的な実装コードを参考までに共有していま...

Vue2は応答性を提供するためにprovide injectを実装しています

1. vue2 での従来の書き方 // 親コンポーネントは 'foo' を提供します...