1. テンプレート文字列とは何ですか?テンプレート 一般的な使用法は次のとおりです。 // ` 記号で囲まれた文字列はテンプレート文字列と呼ばれます。let str = `this is str` console.log(typeof str, str); //文字列これはstrです 2. 複数行のテンプレート文字列
サンプルコードは次のとおりです。 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. タグ付きテンプレート文字列テンプレート文字列の機能は上記に限定されません。その後に、テンプレート文字列を処理するために呼び出される関数の名前が続く場合があります。これはタグ付き str = 'str' とします console.log `これは ${str} です`; // console.log(['this is ', ''], str); と同等 タグ テンプレートは実際にはテンプレートではなく、関数呼び出しの特別な形式です。 「ラベル」は関数を参照し、それに続くテンプレート文字列はそのパラメータです。 4. 生の文字列タグ関数の最初の引数には、特殊文字を置き換えずにテンプレート文字列の元の文字列にアクセスするために使用できる特別な属性 サンプルコードは次のとおりです。 /* 生の文字列は、タグ付きテンプレート文字列で使用されます。関数の最初のパラメータには、文字列の生の文字列を取得できる raw 属性があります。 * いわゆる元の文字列は、テンプレート文字列が定義されたときの内容を指し、処理後の内容ではありません*/ 関数タグ(文字列) { コンソールログ(文字列.raw[0]); } タグ `文字列テスト 行 1 \n 文字列テスト 行 2` // 文字列テスト 行 1 \n 文字列テスト 行 2 さらに、 サンプルコードは次のとおりです。 str = String.raw `Hi\n${2+3}!` とします。 // 、Hi の後の文字は改行文字ではなく、\ と n は 2 つの異なる文字です console.log(str); // Hi\n5! 5.文字列が含まれているかどうかを判定する5.1 include() メソッド
構文構造は次のとおりです。 str.includes(検索文字列[, 位置]) パラメータの説明:
サンプルコードは次のとおりです。 str = 'abcdef' とします。 console.log(str.includes('c')); // 真 console.log(str.includes('d')); // 真 console.log(str.includes('z')); // 偽 console.log(str.includes('A')); // 偽
サンプルコードは次のとおりです。 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() メソッド
構文構造は次のとおりです。 str.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() メソッド
構文構造は次のとおりです。 str.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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: IntelliJ IDEA に Docker プラグインをインストールする詳細な手順 (2018 バージョン)
>>: Google Web Fonts でウェブサイトに無制限のフォントを追加
tomcat サーバーの構成誰もが Web について学習するときに、自分のツール用に Tomcat ...
SQL クエリ ステートメントの実行順序は次のとおりです。 (7)選択 (8) DISTINCT &...
まず、私の基本的な開発環境を見てみましょう。オペレーティングシステム: MacOS 10.13.5 ...
目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...
この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...
デザイナーは独自のフォント ライブラリを持っているため、プロジェクトの設計時にすぐに使用できます。今...
Redis クラスターとはRedis クラスターは、Redis が提供する分散データベース ソリ...
レンガを移動するプロセスでは、さまざまな環境および構成の問題があり、毎回異なるエラーが発生します。 ...
この記事では、キャンバスを使用してWeChatアプレットに時計を描く具体的なコードを参考までに共有し...
目次1. JavaScriptで配列を作成する方法2. 配列メソッドの概要3. 方法の詳細な説明1....
border-radius:10px; /* すべての角は半径 10px で丸められます*/ bor...
目次1. 関数を宣言する2. 関数の呼び出し3. 関数パラメータ4. 関数の戻り値5. 議論の使用6...
1. HTMLハイパーリンクによって開かれるウィンドウのサイズコードをコピーコードは次のとおりです...
目次1. 準備Redisイメージを取得する2. Redis Sentinel マスタースレーブモード...
成果を達成する 実装コードhtml <div class="wrapper"...