JavaScriptのテンプレート文字列とは

テンプレート文字列は、埋め込み式を可能にする ES6 で導入された新しい文字列リテラルです。文字列の拡張バージョンです。バックティックを使用して、通常の文字列内の二重文字を置き換えます。引用符と一重引用符。テンプレート リテラルを使用すると、文字列内で一重引用符と二重引用符の両方を使用できます。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

テンプレート リテラルは、埋め込み式を許可する文字列リテラルで、ES6 で導入された新しい文字列リテラルです。複数行の文字列と文字列補間関数を使用できます。 ES2015 仕様の以前のバージョンでは、これらは「テンプレート文字列」と呼ばれていました。

テンプレート文字列では、通常の文字列の二重引用符や一重引用符の代わりにバックティック (` `) が使用されます。テンプレート文字列には、特定の構文 (${expression}) のプレースホルダーを含めることができます。プレースホルダー内の式と周囲のテキストは、すべての部分を連結する役割を担うデフォルト関数に一緒に渡されます。テンプレート文字列が式で始まる場合、その文字列はタグ付きテンプレート文字列と呼ばれ、この式は通常は関数です, テンプレート文字列が処理された後に呼び出されます。この関数を使用すると、最終結果を出力する前にテンプレート文字列を操作できます。テンプレート文字列内でバックティック (`) を使用する場合は、その前にエスケープ文字 (\) を追加する必要があります。

`\`` === "`" // --> true

テンプレート文字列は、通常の文字列として使用できるほか、複数行の文字列を定義したり、文字列に変数を埋め込んだりするために使用することもできます。

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

// 使用 ` 符号包裹的字符串称为模板字符串
let str = `this is str`
console.log(typeof str, str); //string this is str

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

ECMAScript 2015 によって提供されるテンプレート文字列は、通常の文字列とは異なります。テンプレート文字列内のスペース、インデント、改行は保持されます。

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

let str = `this 
      is str`
console.log(typeof str, str);
/*
  string this 
      is str
*/

1. 式を含むテンプレート文字列

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

`${expression}`

サンプルコードは以下の通りです。

let str1 = `this is str1`
let str2 = `this is str2`
// 只需要将表达式写入 ${} 中
let and = `${str1} and ${str2}`
console.log(and); // this is str1 and this is str2

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

テンプレート文字列の機能は上記だけではありません。このテンプレート文字列を処理するために呼び出される関数の名前の後に続けることができます。これをタグ付きテンプレート機能と呼びます。

let str = 'str'
console.log`this is ${str}`;
// 等同于
console.log(['this is ', ''], str);

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

元の文字列

タグ関数の最初のパラメータには特別な属性 raw があり、これを通じてテンプレート文字列の元の文字列にアクセスできます。特別に置き換えられた文字よりも。

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

/*
  原始字符串 应用在带标签的模板字符串中
  * 在函数的第一个参数中存在 raw 属性，该属性可以获取字符串的原始字符串。
  * 所谓的原始字符串，指的是模板字符串被定义时的内容，而不是处理之后的内容
*/
function tag(string) {
  console.log(string.raw[0]);
}
tag `string test line1 \n string test line2` // string test line1 \n string test line2

また、String.raw() メソッドを使用してファンクション キーの元の文字列を取得することは、デフォルトのテンプレート関数および文字列と同じです。接続の作成。

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

let str = String.raw `Hi\n${2+3}!`;
// ，Hi 后面的字符不是换行符，\ 和 n 是两个不同的字符
console.log(str); // Hi\n5!

文字列が含まれるかどうかを判定

1,includes()メソッド

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

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

str.includes(searchString[, position])

パラメータの説明:

• searchString: この文字列内で検索される文字列。

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

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

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

let str = 'abcdef';
console.log(str.includes('c')); // true
console.log(str.includes('d')); // true
console.log(str.includes('z')); // false
console.log(str.includes('A')); // false

ECMAScript 2015 が提供する include() メソッドは大文字と小文字を区別します。ここで、大文字と小文字を区別しないメソッドを独自に拡張します。サンプルコードは以下の通りです:

String.prototype.MyIncludes = function (searchStr, index = 0) {
  // 将需要判断的字符串全部改成小写形式
  let str = this.toLowerCase()
  // 将传入的字符串改成小写形式
  searchStr = searchStr.toLowerCase();
  return str.includes(searchStr, index)
}
let str = 'abcdef';
console.log(str.MyIncludes('c')); // true
console.log(str.MyIncludes('d')); // true
console.log(str.MyIncludes('z')); // false
console.log(str.MyIncludes('A')); // true

2.startsWith()メソッド

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

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

str.startsWith(searchString[, position])

パラメータの説明:

searchString: この文字列内で検索される文字列。
position: (オプション) 部分文字列の検索を開始する現在の文字列のインデックス位置。デフォルト値は 0 です。
startsWith() メソッドでは大文字と小文字が区別されることに注意してください。

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

let str = 'abcdef';
/*
  * startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头， 并根据判断结果返回 true 或 false。
  * str.startsWith(searchString[, position])
    参数说明
      searchString: 要在此字符串中搜索的字符串。 
      position: (可选) 从当前字符串的哪个索引位置开始搜寻子字符串， 默认值为 0。
  !值得注意的是startsWith() 方法是区分大小写的。
*/
console.log(str.startsWith('a')); // true
console.log(str.startsWith('c', 2)); // true
console.log(str.startsWith('c')); // flase

3. endsWith() メソッド

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

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

str.endsWith(searchString[, position])

パラメータの説明:

searchString: この文字列内で検索される文字列。
position: (オプション) 部分文字列の検索を開始する現在の文字列のインデックス位置。デフォルト値は 0 です。
endsWith() メソッドでは大文字と小文字が区別されることに注意してください。

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

let str = 'abcdef';
console.log(str.endsWith('f')); // true
console.log(str.endsWith('c', 3)); // true
console.log(str.endsWith('c')); // flase

次の 2 つのメソッドを使用して、大文字と小文字を区別しないメソッドを展開できます。

【関連する推奨事項: JavaScript 学習チュートリアル #]

以上がJavaScriptのテンプレート文字列とはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。