序文文字列はプログラミングの世界で最も基本的かつ重要なデータ型の 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 プロジェクトをデプロイする方法
目次1. データベースのマスター/スレーブ分類: 2. MySQL マスタースレーブの紹介3. マス...
エラーは次のとおりです:キャッチされない TypeError: 未定義のプロパティ 'mod...
MySQL バックアップコールドバックアップ:停止服務進行備份,即停止數據庫的寫入ホットバックアップ...
目次1. NodeがHTTPサーバーを構築する2. HTTPサーバーがリクエストを取得する1. Po...
この記事の例では、WeChatアプレットのビデオプレーヤーコンポーネントの具体的なコードを参考までに...
目次原理ソースコード分析委任されたイベントバインディングすべてのサポートされているイベントを聴くネイ...
この記事では、例を使用して MySQL カスタム関数の使用方法を説明します。ご参考までに、詳細は以下...
オンラインで多くの記事を検索しましたが、解決策は見つかりませんでした。次のように、tomcat7-m...
例: <html> <ヘッド> <スタイル タイプ="tex...
最近、H1 については多くの議論が行われていますが (記事のコンテンツ ページ内)、おおよそ 2 つ...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
目次環境の準備始める1. GitLabリモートリポジトリがマイクロサービスプロジェクトを作成する2....
目次スロークエリログとは何ですか?スロークエリを有効にする方法ログ分析ツール mysqldumpsh...
余計なことは言わないで、コードだけ見てみましょう〜 # docker-compose をダウン # ...
序文モバイル端末のREM適応ソリューションのレビューと概要remの使い方rem 単位の計算は、HTM...