JavaScriptテンプレート文字

2572 ワード

JavaScript|文字列およびテンプレート変数


この記事では、JavaScriptの文字列とテンプレート文字について説明します.
本当は方法達と一緒に整理しようと思っていたのですが思ったより量が多かったので方法については次の方に遅らせましょう
この文書では、MDN WebドキュメントのString標準埋め込みオブジェクトとTempleteテキストページについて説明します.

文字列宣言


JavaScriptで文字列を宣言する方法には、Stringオブジェクトを文字列として宣言し、Stringオブジェクトを使用する作成者宣言が含まれます.
let str1 = 'string literal';
let str2 = String('constructor for string');
let numToStr = String(49);                      // "49"
let nullToStr = String(null);                   // "null"
文字列テキストは、文字列の両側に「(引用符)」または「(二重引用符)を付け、可変値になります.
コンストラクション関数String()は、パラメータ値を文字列に置き換えます.サンプルコードに示すように、数値、ブール値、null、undefinedなども文字列になります.
また、前述のBooleanと同様に、1 String()は文字列となり、新しいキーワードで宣言されたString()はオブジェクトとなります.
let str = String('this is string');
typeof str;             // "string"

let obj = new String('this is object');
typeof obj;             // "object"

Templete Literals


ECMAScript(ES 6)から文字列をテンプレート文字として表すことができます.
テンプレートテキストでは、プレースホルダを使用するか、文字列を複数行に書き込むことができます.
引用符ではなくbacktickを使用して文字列を作成する場合は、テンプレート文字として使用できます.

placeholder


テンプレートライブラリで、$(ドル)と{}(カッコ)を${expression}にマージします.
これはC言語のprintf()関数と似ています.%カッコには、タグ(変数)、式、および関数を含めることができます.たとえば、dを書き、文字列の後ろに整数値を追加します.
テンプレートテキストを使用すると、関数は${}の式と(backtick)で囲まれたテキストを関数に渡し、関数は式の値をテキストに接続して単一の文字列を返します.
let placeholder = 'world';
`hello, ${placeholder}!`        // "hello, world!"

`5 + 8 = ${5 + 8}`              // "5 + 8 = 13"

function fibo(n) {
    if(n === 1 || n === 2) return 1;
    return fibo(n - 1) + fibo(n - 2);
};
`5 + 8 = ${fibo(7)}`            // "5 + 8 = 13"

multi-line strings


文字列が長すぎる場合、改行によって可読性を向上させる方法.文字列では、改行があっても文字列として扱われます.
let pooh = `How lucky I am 
to have something 
that makes saying goodbye so hard.`
もちろん、文字テンプレートのほかに、文字列を複数行に表示する従来の方法もあります.
  • 演算子を使用するか、文字列の行末にを貼り付けます.ただし、を使用すると、後ろにスペースがある場合、SyntaxErrorが表示されます.
  • let verse = 'Many are the plans in a person’s heart\, ' + 
                'but it is the Lord’s purpose that prevails.';
    
    let shining = 'all play and no work \
    makes jack a dull boy'

    Backslash Escape


    特殊文字は前にを付けて文字列に書くことができます.
    `'\`' === \`\\\`\` is ${'`' === `\``}`          // "'`'