JS 文字列を操作するために知っておくべき 4 つのヒント

青灯夜游
リリース: 2021-07-21 09:33:07
転載
1633 人が閲覧しました

String はプログラミングの世界において最も基本的かつ重要なデータ型の 1 つであり、JavaScript も例外ではありません。次の記事では、JavaScript 文字列を操作するための 4 つのエレガントなテクニックを紹介します。

JS 文字列を操作するために知っておくべき 4 つのヒント

#JavaScript 文字列は不変であり、文字、数字、Unicode で構成されるテキストを保存するのに便利です。 JavaScript には、さまざまな方法で文字列を作成および操作できる組み込み関数が多数用意されています。 JavaScript 文字列を操作するための 4 つのエレガントなテクニックを見てみましょう。

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 形式の文字列に変換するために使用されます。通常は、以下に示すように、オブジェクトをパラメータとして渡すだけです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const article = { title: &quot;JavaScript 字符串技巧&quot;, view: 30000, comments: null, content: undefined, }; const strArticle = JSON.stringify(article); console.log(strArticle); // {&quot;title&quot;:&quot;JavaScript 字符串技巧&quot;,&quot;view&quot;:30000,&quot;comments&quot;:null}</pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコードからわかるように、

unknown

stringify 値で除外されます。ですが、null 値はそうではありません。

JSON.stringify()

2 つのオプションのパラメーターを受け入れることができます。2 番目のパラメーターは、印刷するキーの配列またはキーをクリアする関数を指定できる置換子です。次のコード: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">console.log(JSON.stringify(article, [&quot;title&quot;, &quot;comments&quot;])); // {&quot;title&quot;:&quot;JavaScript 字符串技巧&quot;,&quot;comments&quot;:null} console.log(JSON.stringify(article, [])); // {}</pre><div class="contentsignin">ログイン後にコピー</div></div>巨大な JSON の場合、長い配列を渡すと読みやすさと効率に影響を与える可能性があります。したがって、次のコードのように、置換関数を設定して、スキップされるキーに対して

unknown

を返すことができます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const result = JSON.stringify(article, (key, value) =&gt; key === &quot;title&quot; ? undefined : value ); console.log(result); // {&quot;view&quot;:30000,&quot;comments&quot;:null}</pre><div class="contentsignin">ログイン後にコピー</div></div>

JSON.stringify() の 3 番目のパラメーター

は、JSON をフォーマットするために Indent (ネストされたブロックで便利) で指定されます。数値を渡してインデントの間隔を設定したり、文字列を渡してスペースを置き換えたりすることもできます。次のコード: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">console.log(JSON.stringify(article, [&quot;title&quot;], &quot;\t&quot;));</pre><div class="contentsignin">ログイン後にコピー</div></div>出力形式は次のとおりです:

{
    "title": "JavaScript 字符串技巧"
}
ログイン後にコピー

JSON# を受け入れる

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

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

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

console.log(jsonObj); // { title: &#39;JavaScript 字符串技巧&#39;, view: 0, comments: null }
ログイン後にコピー
3. 複数行の文字列と埋め込み式

JavaScript で文字列を作成するには 3 つの方法があり、一重引用符を使用できます ''

、二重引用符

"" またはバックティック マーク (キーボードの左上、 1 の左キー)。

const countries1 = "China";
const countries2 = "China";
const countries3 = `China`;
ログイン後にコピー
最初の 2 つの作成方法は基本的に同じであり、これらを組み合わせて (反対の構文スタイルを使用して) 引用符で囲まれた文字列を連結したり追加したりすることができます。一方、バッククォートは文字列操作で派手で強力な処理を行うことができます。

バッククォートはテンプレート リテラルとも呼ばれ、複数行の文字列や埋め込み式を作成する場合に便利です。以下は、文字列補間を使用して JavaScript で複数行の文字列を作成する方法のコードです。

const year = "2021";
const month = 7;
const day = 2;
const detail = `今天是${year}年${month}月${day}日,
是个不错的日子!`;

console.log(detail);
ログイン後にコピー

出力結果も、次のように改行されます。 ## の文字列リテラル #${}

では任意の有効な式を使用できます。関数呼び出しや式、またはネストされたテンプレートでも構いません。

タグ付きテンプレートは、埋め込み式がパラメータである関数を使用してテンプレート リテラルを解析できるようにする、テンプレート リテラルの高度な形式です。次のコード:

今天是2021年7月2日,
是个不错的日子!
ログイン後にコピー

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

JavaScript 文字列に部分文字列が存在するかどうかを見つけるのは簡単です。ES6 ではの場合は、

includes

関数を使用するだけです。 ただし、文字列がデータに格納されているかどうかを確認する必要があります。メイン配列内の項目の 1 つが含まれている場合は、

true

が返されます。含まれていない場合は、それが返されます。 false が返されるため、次のコードに示すように、

some

関数は includes とともに使用されます。 ##概要JavaScript の文字列操作はプロジェクトで一般的です 操作、上記の 4 つのスキルは、学習して実際の開発に適用する価値があります。 プログラミング関連の知識について詳しくは、プログラミング入門

をご覧ください。 !

以上がJS 文字列を操作するために知っておくべき 4 つのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート