JS ES 新機能テンプレート文字列

JS ES 新機能テンプレート文字列

1. テンプレート文字列とは何ですか?

テンプレートTemplate String文字列の拡張バージョンであり、Spectrum 文字列内の二重引用符と一重引用符をバックティック (```) を使用して置き換えます。通常の文字列として使用することも、複数行の文字列を定義したり、文字列に変数を埋め込んだりするために使用することもできます。

一般的な使用法は次のとおりです。

// ` 記号で囲まれた文字列はテンプレート文字列と呼ばれます。let str = `this is str`
console.log(typeof str, str); //文字列これはstrです

2. 複数行のテンプレート文字列

ECMAScript 2015で提供されるテンプレート文字列と通常の文字列の違いは、テンプレート文字列内のスペース、インデント、改行がすべて保持されることです。

サンプルコードは次のとおりです。

str = `これ 
      str` です
console.log(typeof str, str);
/*
  これを文字列にする 
      はstr
*/


2.1 式付きテンプレート文字列

テンプレート文字列は埋め込み式をサポートします。構文構造は次のとおりです。

`${式}`


サンプルコードは次のとおりです。

str1 = `これはstr1です`とします
str2 = `これはstr2です`とします
// 式を ${} に書き込むだけです。let and = `${str1} and ${str2}`
console.log(and); // これは str1 で、これは str2 です


3. タグ付きテンプレート文字列

テンプレート文字列の機能は上記に限定されません。その後に、テンプレート文字列を処理するために呼び出される関数の名前が続く場合があります。これはタグ付きtagged template関数と呼ばれます。

str = 'str' とします
console.log `これは ${str} です`;
// console.log(['this is ', ''], str); と同等


タグ テンプレートは実際にはテンプレートではなく、関数呼び出しの特別な形式です。 「ラベル」は関数を参照し、それに続くテンプレート文字列はそのパラメータです。

4. 生の文字列

タグ関数の最初の引数には、特殊文字を置き換えずにテンプレート文字列の元の文字列にアクセスするために使用できる特別な属性rawあります。

サンプルコードは次のとおりです。

/*
  生の文字列は、タグ付きテンプレート文字列で使用されます。関数の最初のパラメータには、文字列の生の文字列を取得できる raw 属性があります。
  * いわゆる元の文字列は、テンプレート文字列が定義されたときの内容を指し、処理後の内容ではありません*/
関数タグ(文字列) {
  コンソールログ(文字列.raw[0]);
}
タグ `文字列テスト 行 1 \n 文字列テスト 行 2` // 文字列テスト 行 1 \n 文字列テスト 行 2


さらに、 String.raw()メソッドを使用して生の文字列を生成することは、デフォルトのテンプレート関数と文字列連結を使用して作成することと同じです。

サンプルコードは次のとおりです。

str = String.raw `Hi\n${2+3}!` とします。
// 、Hi の後の文字は改行文字ではなく、\ と n は 2 つの異なる文字です console.log(str); // Hi\n5!


5.文字列が含まれているかどうかを判定する

5.1 include() メソッド

includes()メソッドは、文字列が別の文字列に含まれているかどうかを判定し、判定結果に基づいてtrueまたはfalseを返します。

構文構造は次のとおりです。

str.includes(検索文字列[, 位置])


パラメータの説明:

  • searchString : この文字列内で検索する文字列。
  • position : (オプション) 現在の文字列内で部分文字列の検索を開始するインデックス位置。デフォルト値は 0 です。

include() メソッドでは大文字と小文字が区別されることに注意してください。

サンプルコードは次のとおりです。

str = 'abcdef' とします。
console.log(str.includes('c')); // 真
console.log(str.includes('d')); // 真
console.log(str.includes('z')); // 偽
console.log(str.includes('A')); // 偽


ECMAScript 2015で提供されるincludes()メソッドは大文字と小文字を区別します。これを大文字と小文字を区別しないように拡張しました。

サンプルコードは次のとおりです。

String.prototype.MyIncludes = 関数 (searchStr, インデックス = 0) {
  // 判定対象となる文字列をすべて小文字に変更する let str = this.toLowerCase()
  // 渡された文字列を小文字に変更します。searchStr = searchStr.toLowerCase();
  str.includes(searchStr, index) を返します
}
str = 'abcdef' とします。
console.log(str.MyIncludes('c')); // 真
console.log(str.MyIncludes('d')); // 真
console.log(str.MyIncludes('z')); // 偽
console.log(str.MyIncludes('A')); // 真


5.2startsWith() メソッド

startsWith()メソッドは、現在の文字列が別の指定された部分文字列で始まるかどうかを判定し、判定結果に基づいてtrueまたはfalseを返すために使用されます。

構文構造は次のとおりです。

str.startsWith(検索文字列[, 位置])


パラメータの説明:

  • searchString : この文字列内で検索する文字列。
  • position : (オプション) 現在の文字列内で部分文字列の検索を開始するインデックス位置。デフォルト値は 0 です。

startsWith() メソッドでは大文字と小文字が区別されることに注意してください。

サンプルコードは次のとおりです。

str = 'abcdef' とします。

/*
  * startsWith() メソッドは、現在の文字列が別の指定された部分文字列で始まるかどうかを判定し、判定結果に基づいて true または false を返すために使用されます。
  * str.startsWith(検索文字列[, 位置])
    パラメータの説明 searchString: この文字列内で検索される文字列。 
      position: (オプション) 現在の文字列内で部分文字列の検索を開始するインデックス位置。デフォルト値は 0 です。
  !startsWith() メソッドでは大文字と小文字が区別されることに注意してください。
*/
console.log(str.startsWith('a')); // 真
console.log(str.startsWith('c', 2)); // 真
console.log(str.startsWith('c')); // フラッシュ


5.3 endsWith() メソッド

endsWith()メソッドは、現在の文字列が別の指定された部分文字列で「終了」するかどうかを判定し、判定結果に基づいてtrueまたはfalseを返すために使用されます。

構文構造は次のとおりです。

str.endsWith(検索文字列[, 位置])


パラメータの説明:

  • searchString : この文字列内で検索する文字列。
  • position : (オプション) 現在の文字列内で部分文字列の検索を開始するインデックス位置。デフォルト値は 0 です。

endsWith() メソッドでは大文字と小文字が区別されることに注意してください。

サンプルコードは次のとおりです。

str = 'abcdef' とします。

console.log(str.endsWith('f')); // 真
console.log(str.endsWith('c', 3)); // 真
console.log(str.endsWith('c')); // フラッシュ


次の 2 つのメソッドは、大文字と小文字を区別しないメソッドを独自に拡張できます。

JS ES テンプレート文字列の新機能に関するこの記事はこれで終わりです。より関連性の高い ES テンプレート文字列コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript ES6 のテンプレート文字列の詳細な説明

<<:  IntelliJ IDEA に Docker プラグインをインストールする詳細な手順 (2018 バージョン)

>>:  Google Web Fonts でウェブサイトに無制限のフォントを追加

推薦する

CSS3 列を使用したカード ウォーターフォール レイアウトを実装するためのサンプル コード

この記事では、カード ウォーターフォール レイアウトを実現するための CSS3 列のサンプル コード...

ウェブサイトデザインにおいて非常に重要な概念であるdiv+floatの分析

ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト ...

Ubuntu 18.04 に mysql5.7.23 をインストールするチュートリアル

この記事では、Ubuntu18.04にmysql5.7.23をインストールする具体的な方法を参考まで...

Vueフォームで画像を処理する方法

質問: Vue にブログ投稿をアップロードするためのフォームがあり、タイトル、本文、説明、スニペット...

中国のウェブサイトユーザーエクスペリエンスランキング

<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...

Vueプロジェクトでコンポーネントをカプセル化する簡単な手順

目次序文Toastコンポーネントをカプセル化する方法ユースケース具体的な実装要約する序文ビジネスが発...

Nginx で WordPress 擬似静的を設定する方法の例

Baidu の擬似静的の説明を引用します。擬似静的は、実際の静的に相対的です。通常、検索エンジンの使...

HTMLのセマンティクスといくつかの簡単な最適化についての簡単な説明

1. セマンティゼーションとは何ですか? Bing辞書の説明セマンティクス化とは、適切な HTML ...

入力ボックスのオートコンプリート機能をオフにする

これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...

MySQL SQL文の特殊処理文のまとめ(必読)

1.テーブル全体を更新します。データ行の列の値が空の場合は、別の列フィールドの値と同じにします。 ...

Centos7でのパーティションのフォーマットとマウントの実装

Linux では、ハードディスクの追加やパーティションの再マウントといった状況に頻繁に遭遇します。こ...

Web デザイン スキル: iframe の適応高さの問題

おそらく、この問題にまだ遭遇していない人もいるでしょうから、まずは適応高さとは何かを説明しましょう。...

MySQL でデータ テーブルを作成し、主キーと外部キーの関係を確立する方法の詳細な説明

序文MySQL テーブルの主キーと外部キーを作成するときは、次の点に注意する必要があります。主キーと...

DIV+CSS命名規則の詳細な説明はSEO最適化に役立ちます

1. CSSファイルの命名規則提案: 文字、_、-、数字を使用します。文字で始まる必要があり、純粋な...

CSS3マスクレイヤーのくり抜き効果を実現するさまざまな方法

この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用の...