序文文字列はプログラミングの世界で最も基本的かつ重要なデータ型の 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")); 出力は次の形式になります。
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(詳細); 出力結果も次のように折り返されます。
文字列リテラルに加えて、${} 内では任意の有効な式が許可されます。これは、関数呼び出しや式、ネストされたテンプレートであってもかまいません。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQLにおける(JOIN/ORDER BY)文のクエリ処理と最適化方法
>>: nginx で Vue プロジェクトをデプロイする方法
Linux では、すべてがファイルであり (ディレクトリもファイルです)、各ファイルにはユーザーに対...
目次1. ユーザーが作成したスクリプト2. 単語当てゲーム3. ネットワークカードのトラフィック監視...
最新バージョンの WIN10 では、Microsoft は仮想化コンテナに基づくセキュリティ メカニ...
目次方法 1: ルーティング メタ情報 (meta)方法 2: ルーティング テーブルを動的に生成す...
インターネットの発達により、バスを待ったり地下鉄に乗ったりする時間など、断片的な時間を活用して、いつ...
目次使用シナリオ達成方法1. 動的コンポーネントを配置する場所2. コンポーネントのインスタンスを取...
背景 - オンラインアラートオンライン サーバーがアラームを発し、ディスク使用率 disk.util...
MySQL スロー クエリ ログは、問題のあるクエリを追跡するのに非常に役立ちます。現在のプログラム...
1.0 Redis の永続性Redis はメモリ内データベースです。サーバー プロセスが終了すると、...
Linuxシステムをお持ちでない場合は、ダウンロードとインストールについてはhttps://www....
序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...
序文簡単に言えば、tcpdump は、ネットワーク上のトラフィックをダンプし、ユーザーの定義に従って...
コードをコピーコードは次のとおりです。 <form action="/hehe&qu...
この記事の例では、WeChatアプレットマップで使用される具体的な実装コードを参考までに共有していま...
1. vue2 での従来の書き方 // 親コンポーネントは 'foo' を提供します...