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 でウェブサイトに無制限のフォントを追加

推薦する

Nest.js パラメータ検証とカスタム戻りデータ形式の詳細な説明

0x0 パラメータ検証Nest.jsでは、パラメータ検証業務のほとんどをパイプライン方式で実装してい...

Alibaba Cloudのセキュリティルール設定の詳細な説明

2日前、ダブル11ショッピングフェスティバルを利用して、Alibaba CloudでECS(サーバー...

XHTML 入門チュートリアル: XHTML ハイパーリンク

ハイパーリンクはインターネット全体を接続していると言っても過言ではありません。ハイパーリンクは、別の...

jQuery でダイナミックなパーティクル効果を実現

この記事では、動的なパーティクル効果を実現するためのjQueryの具体的なコードを参考までに紹介しま...

mysql5.6 の無効な utf8 設定の問題を解決する

mysql5.6 のグリーン バージョンを解凍すると、my-default.ini ファイルが作成さ...

Vue の新しいおもちゃ VueUse の具体的な使い方

目次序文VueUseとは使いやすいおなじみの手ぶれ補正やスロットル機能もありますグローバル状態を共有...

HTML での一般的なリダイレクト接続の例コード

コードをコピーコードは次のとおりです。 window.location.href="zcb...

Windows に Docker と docker-compose スイートをインストールするための詳細なチュートリアル

目次導入ダウンロードしてインストールする設定docker-composeをインストールする導入Doc...

MySQL 5.6.37 (zip) ダウンロード インストール 構成 グラフィック チュートリアル

この記事では、MySQL 5.6.37のダウンロード、インストール、設定のチュートリアルを参考までに...

Mysql5.7.14 インストールと設定方法操作グラフィックチュートリアル(パスワード問題解決)

この記事は主に、以前のインストール方法を使用して MySQL 5.7.14 をインストールするときに...

AIX マウント NFS の書き込み効率が低い場合の解決策

NFSが提供するサービスマウント: サーバー上で /usr/sbin/rpc.mountd サーボ ...

複数の .sql ファイルを MySQL に効率的にインポートする方法の詳細な説明

MySQL には、複数の .sql ファイル (SQL ステートメントを含む) をインポートする方法...

Tomcat の設定と Eclipse での起動方法

目次Tomcat8のインストールと設定方法tomcat ダウンロードTomcat マネージャーを有効...

MySQL Routerのインストールと展開

目次01 MySQLルーターの紹介MySQL Router とは何ですか? 02 MySQLルータの...

MySQL における in と exists の使い方と違いの紹介

まずコードを書いて (int i=0;i<1000;i++){ (int j=0;j<5...