web-dev-qa-db-ja.com

JavaScriptでバックチャット文字（ `）を使用する

JavaScriptでは、バックティック† 一重引用符と同じように機能するようです。例えば、私はこのような文字列を定義するためにバックティックを使うことができます：

var s = `abc`;

バッククォートの振る舞いが一重引用符の振る舞いと実際に異なる方法はありますか？

†プログラマの間では、 "バックティック"はより一般的に グレーブアクセント と呼ばれるものの1つの名前です。プログラマは時々 代替名 "backquote"と "backgrave"を使うこともあります。また、 スタックオーバーフロー などで、 "backtick"の他の一般的なスペルは "back-tick"と "back tick"です。

javascriptbacktickssingle-quotestemplate-stringsbackquote
198
caesarwang

これは テンプレートリテラル と呼ばれる機能です。

それらは、ECMAScript 2015仕様の以前の版では「テンプレート文字列」と呼ばれていました。

テンプレートリテラルはFirefox 34、Chrome 41、およびEdge 12以降でサポートされていますが、Internet Explorerではサポートされていません。

テンプレートリテラルは複数行の文字列を表現するために使うことができ、変数を挿入するために "補間"を使うことができます。

var a = 123, str = `---
   a is: ${a}
---`;
console.log(str);

出力：

---
   a is: 123
---

さらに重要なことは、変数名だけでなく、Javascript式を含めることができるということです。

var a = 3, b = 3.1415;

console.log(`PI is nearly ${Math.max(a, b)}`);
226
try-catch-finally

ECMAScript 6は、バックティックを区切り文字として使用して、新しいタイプの文字列リテラルを思い付きます。これらのリテラルを使用すると、基本的な文字列補間式を埋め込むことができます。その後、それらは自動的に解析および評価されます。

let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };

let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
  "<p>I am " + person.age + " old</p>\n" +
  "<strong>\"" + person.greeting + "\" is what I usually say</strong>";

let newHtmlStr =
 `<p>My name is ${person.name},</p>
  <p>I am ${person.age} old</p>
  <p>"${person.greeting}" is what I usually say</strong>`;

console.log(usualHtmlStr);
console.log(newHtmlStr);

ご覧のとおり、文字列リテラルとして解釈される一連の文字の周りに`を使用しましたが、${..}の形式の式は直ちに構文解析され、インラインで評価されます。

内挿された文字列リテラルの1つの本当に良い利点は、それらが複数の行にまたがって分割できることです。

var Actor = {"name": "RajiniKanth"};

var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log(text);
// Now is the time for all good men
// to come to the aid of their
// country!

補間式

関数呼び出し、インライン関数式呼び出し、さらには他の補間文字列リテラルを含む、有効な式を補間文字列リテラルの${..}内に含めることができます。

function upper(s) {
  return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper("warm")} welcome
to all of you ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!

ここで、`${who}s`とは対照的に、who変数と"s"文字列を組み合わせるとき、内側のwho + "s"内挿された文字列リテラルは、私たちにとって少し便利なものでした。また、注意しておくと、内挿された文字列リテラルはそれが現れる場所で単にレキシカルスコープであり、動的スコープではありません。

function foo(str) {
  var name = "foo";
  console.log(str);
}
function bar() {
  var name = "bar";
  foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"

HTMLにテンプレートリテラルを使用すると、煩わしさが軽減され、間違いなく読みやすくなります。

当たり前のやり方：

'<div class="' + className + '">' +
  '<p>' + content + '</p>' +
  '<a href="' + link + '">Let\'s go</a>'
'</div>';

ECMAScript 6の場合

`<div class="${className}">
  <p>${content}</p>
  <a href="${link}">Let's go</a>
</div>`
  • あなたの文字列は複数行にまたがることができます。
  • 引用符をエスケープする必要はありません。
  • 次のようなグループ分けは避けることができます： '">'
  • あなたはプラス演算子を使う必要はありません。

タグ付きテンプレートリテラル

テンプレート文字列にタグを付けることもできます。テンプレート文字列がタグ付けされると、リテラルと置換がfunctionに渡され、結果の値が返されます。

function myTaggedLiteral(strings) {
  console.log(strings);
}

myTaggedLiteral`test`; //["test"]

function myTaggedLiteral(strings, value, value2) {
  console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5

ここでは、スプレッド演算子を使用して複数の値を渡すことができます。最初の引数 - 私たちはそれを文字列と呼びました - はすべての普通の文字列の配列です（補間された式の間のもの）。

その後、... gather/rest operatorを使用して、後続のすべての引数をvaluesという配列にまとめます。ただし、(value1, value2, etc.)の場合と同様に、それらをstringsパラメータに続く個別の名前付きパラメータとして残すこともできます。

function myTaggedLiteral(strings, ...values) {
  console.log(strings);
  console.log(values);
}

let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5

Values配列に集められた引数は、文字列リテラルで見つかる既に評価された補間式の結果です。タグ付けされた文字列リテラルは、補間が評価された後、最後の文字列値がコンパイルされる前の処理手順に似ています。これにより、リテラルから文字列を生成する方法をより細かく制御できます。再利用可能なテンプレートを作成する例を見てみましょう。

const Actor = {
  name: "RajiniKanth",
  store: "Landmark"
}

const ActorTemplate = templater`<article>
  <h3>${'name'} is a Actor</h3>
  <p>You can find his movies at ${'store'}.</p>

</article>`;

function templater(strings, ...keys) {
  return function(data) {
    let temp = strings.slice();
    keys.forEach((key, i) => {
      temp[i] = temp[i] + data[key];
    });
    return temp.join('');
  }
};

const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);

生の文字列

私たちのタグ関数は文字列と呼ばれる最初の引数を受け取ります。これは配列です。しかし、追加のデータが含まれています：すべての文字列の生の未処理バージョンです。次のように.rawプロパティを使用してこれらの生の文字列値にアクセスできます。

function showraw(strings, ...values) {
  console.log(strings);
  console.log(strings.raw);
}
showraw`Hello\nWorld`;

お分かりのように、生のバージョンの文字列はエスケープされた\nシーケンスを保持しますが、処理されたバージョンの文字列はそれをエスケープされていない実際の改行として扱います。 ECMAScript 6には、文字列リテラルタグとして使用できる組み込み関数が付属しています：String.raw(..)。それは単に文字列の生のバージョンを通過します。

console.log(`Hello\nWorld`);
/* "Hello
World" */

console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"
117
Thalaivar

バックリック（`）はテンプレートリテラルを定義するために使用されます。テンプレートリテラルは、文字列の操作を容易にするためのES6の新機能です。

特徴：

  • テンプレートリテラル内の任意の種類の式を補間できます。
  • それらは複数行にすることができます。

注：バッククォート（'）の中に一重引用符（"）と二重引用符（`）を簡単に使用できます。

例：

var nameStr = `I'm "Rohit" Jindal`;

変数や式を補間するために、そのために${expression}記法を使うことができます。

var name = 'Rohit Jindal';
var text = `My name is ${name}`;
console.log(text); // My name is Rohit Jindal

複数行の文字列は、新しい行に\nを使用する必要がなくなったことを意味します。

例：

const name = 'Rohit';
console.log(`Hello ${name}!
How are you?`);

出力：

Hello Rohit!
How are you?
19
Rohit Jindal

バックティックは、以前はテンプレート文字列と呼ばれていたテンプレートリテラルを囲みます。テンプレートリテラルは、埋め込み式と文字列補間機能を可能にする文字列リテラルです。

テンプレートリテラルには、プレースホルダーに埋め込まれた式がドル記号で表され、式の周囲に波かっこが表示されます（例：${expression}）。プレースホルダ/式は関数に渡されます。デフォルトの関数は単に文字列を連結します。

バックティックを回避するには、その前にバックスラッシュを付けます。

`\`` === '`'; => true

より簡単に複数行の文字列を書くためにバッククォートを使う：

console.log(`string text line 1
string text line 2`);

または

console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

vs. Vanilla JavaScript：

console.log('string text line 1\n' +
'string text line 2');

または

console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');

エスケープシーケンス：

  • \uで始まるUnicodeエスケープ、例えば\u00A9
  • \u{}で示されるUnicodeコードポイントエスケープ、例えば\u{2F804}
  • \xで始まる16進数のエスケープ、例えば\xA9
  • \と（a）digit（s）で始まる8進数リテラルエスケープ、例えば\251
12
mrmaclean89

概要：

JavaScriptのBackticksは、動的な文字列を簡単に作成するためにECMAScript 6 // ECMAScript 2015で導入された機能です。このECMAScript 6の機能は、テンプレート文字列リテラルとも呼ばれます。通常の文字列と比較した場合、以下の利点があります。

  • テンプレート文字列では改行は許可されているので複数行になることがあります。通常の文字列リテラル（''または""で宣言されたもの）は改行を持つことができません。
  • ${myVariable}構文を使って変数値を文字列に簡単に補間することができます。

例：

const name = 'Willem';
const age = 26;

const story = `
  My name is: ${name}
  And I'm: ${age} years old
`;

console.log(story);

ブラウザの互換性：

テンプレート文字列リテラルは、すべての主要ブラウザベンダー（Internet Explorerを除く）によってネイティブにサポートされています。ですから、本番コードで使うのはかなり節約になります。ブラウザの互換性のより詳細なリストはこちら にあります 。

2
Willem van der Veen

良い部分は、基本的な数学を直接作ることができるということです。

let nuts = 7

more.innerHTML = `

<h2>You collected ${nuts} nuts so far!

<hr>

Double it, get ${nuts + nuts} nuts!!

`
<div id="more"></div>

ファクトリ関数では本当に便利になりました。

function nuts(it){
  return `
    You have ${it} nuts! <br>
    Cosinus of your nuts: ${Math.cos(it)} <br>
    Triple nuts: ${3 * it} <br>
    Your nuts encoded in BASE64:<br> ${btoa(it)}
  `
}

nut.oninput = (function(){
  out.innerHTML = nuts(nut.value)
})
<h3>NUTS CALCULATOR
<input type="number" id="nut">

<div id="out"></div>
2
Cryptopat

文字列補間とは別に、バックティックを使用して関数を呼び出すこともできます。


var sayHello = function () {
    console.log('Hello', arguments);
}

// to call this function using ``

sayHello`some args`; // check console for the output

// or
sayHello`
    some args
`;

スタイル付きコンポーネントをチェック 、彼らはそれを頻繁に使用します。

0
Ankit Kumar