2021年12月3日 JavaScript (JS Primer) 文字列の組み立て

文字列の組み立て

URLのような構造的な文字列の組み立てを行う場合は 文字列結合演算子（+）で単純に結合するよりも専用の関数を用意するほうが安全です。

問題の例は以下です。

function getResource(baseURL, pathname) {
    const url = baseURL + pathname;
    console.log(url); // => "http://example.com/resouces//example.js"
}
const baseURL = "http://example.com/resouces/";
const pathname = "/example.js";
getResource(baseURL, pathname);

上記のようにURLの結合を行う場合、末尾に/がついている場合に意図しないURLからリソースを取得してしまいます。

この問題を踏まえて以下のようにreplaceを使うことで解決します。

// ベースURLとパスを結合した文字列を返します。
function baseJoin(baseURL, pathname) {
    // 末尾に / がある場合は、/ を削除してから結合します。
    const stripSlashBaseURL = baseURL.replace(/\/$/, "");
    return stripSlashBaseURL + pathname;
}


function getResource(baseURL, pathname) {
    const url = baseJoin(baseURL, pathname);
    console.log(url); // => "http://example.com/resouces/example.js"
}
const baseURL = "http://example.com/resouces/";
const pathname = "/example.js";
getResource(baseURL, pathname);

URLには末尾に/をつける人もいますがつけない人もいます。今回のコード例ではつけない事を前提に関数定義されていたので、/を末尾につける人が実行すると//とスラッシュが２つになってしまうという問題がありました。 その曖昧さを解決するために新たにbaseJoin関数を定義しています。 baseURL.replace(/\/$/, ""); の部分で末尾にスラッシュがあった場合は空文字列に置き換える事で解決しています。

タグつきテンプレート関数

JavaScriptでは、テンプレートとなる文字列に対して一部分だけを変更する処理を行う方法として、タグつきテンプレート関数があります。 タグつきテンプレート関数とは、関数テンプレート という形式で記述する関数とテンプレートリテラルを合わせた表現です。

ポイント

• テンプレートとなる文字列に対して一部分だけを変更する処理を行う方法です。
• 関数テンプレートと呼び出すと渡される引数が特殊な形になります。

復習

• Rest parametersは、仮引数名の前に...をつけた仮引数のことで、残余引数とも呼ばれます。 Rest parametersには、関数に渡された値が配列として代入されます。

タグつきテンプレートの例文が難しくまとめきれなかったため 明日の記事でまとめたいと思います。

参考

JSprimer 文字列の組み立て