文字列とテンプレートリテラル

画面に出す文言、フォームから受け取った入力、API から返ってくる商品名。Web アプリが扱う値の多くは文字列（文字を並べた値）です。

この記事では、文字列の作り方として 3 種類のクォートとテンプレートリテラルを扱い、続けて前後の空白を落とす、含まれるかを調べる、区切って組み直す、桁をそろえるといった、入力を表示できる形に整えるためのメソッドを確認します。

文字列を作って整える — クォート 3 種とテンプレートリテラル

注文完了の画面に「保温マグカップ を 3 個 / 合計 3600 円」と出すとき、商品名と数量と金額は別々の変数に入っています。これを 1 つの文章にまとめるのが文字列の組み立てです。まずは文字列そのものの書き方から確認します。

文字列は、シングルクォート '、ダブルクォート "、バッククォートのいずれかで囲んで書きます。囲んだクォートと同じ記号が中に出てくるとそこで文字列が終わったと解釈されるため、中に引用符を含めたいときは別の種類で囲むか、\ を前に付けて記号としての働きを打ち消します。

バッククォートの実物は、このあとのコード例で確認できます。日本語配列のキーボードでは Shift を押しながら「@」で入力します。なお \ のキーは表記が ¥ になっていることがありますが、同じ文字です。

const productName = "保温マグカップ";   // ダブルクォートで囲む
const categoryName = 'キッチン用品';    // シングルクォートで囲む

// 囲んだのと同じ記号を中に書きたいときは \ で打ち消す
const notice = "店長の\"おすすめ\"です";

// 別の種類で囲めば打ち消しは要らない
const notice2 = '店長の"おすすめ"です';

console.log(productName.length);   // 7  文字数が数値で返る
console.log(notice);               // 店長の"おすすめ"です
console.log(notice2);              // 店長の"おすすめ"です

文字数を取り出す length はプロパティ（値に付いている情報で、括弧を付けずに読み出す名前）です。前の記事で扱った toFixed のようなメソッドとは違い、productName.length() のように括弧は付けません。

文字列は + でつなげられますが、変数が増えるほど引用符と + が入り混じって読みにくくなります。そこで使うのがテンプレートリテラル（バッククォートで囲み、${ } の中に書いた値を文字列へ埋め込める書き方）です。

${ } の中には変数だけでなく unitPrice * quantity のような計算式も書けて、先に計算した結果が埋め込まれます。

const productName = "保温マグカップ";
const unitPrice = 1200;
const quantity = 3;

// + でつなぐと、引用符と + が入り混じる
console.log(productName + " を " + quantity + " 個 / 合計 " + unitPrice * quantity + " 円");

// ${ } なら、値も計算式もそのまま書ける
console.log(`${productName} を ${quantity} 個 / 合計 ${unitPrice * quantity} 円`);
// どちらも 保温マグカップ を 3 個 / 合計 3600 円

表示用に整える — trim / slice / toUpperCase

フォームに入力された名前は、前後に空白が混ざっていたり、大文字小文字がそろっていなかったりします。そのまま画面に出すと表示が崩れるので、表示する直前で形を整えます。

前後の空白を落とすのが trim、大文字にそろえるのが toUpperCase、一部だけ切り出すのが slice です。

slice は、切り出しを始める位置と終わりの位置を渡します。位置は先頭を 0 として数え、終わりの位置の文字は含みません。

slice(0, 1) なら先頭の 1 文字、slice(1) のように終わりを省略すると、そこから最後までが返ります。

const rawInput = "  Yamada  ";   // 入力欄から受け取った値

console.log(rawInput.trim());               // Yamada
console.log(rawInput.trim().length);        // 6
console.log(rawInput.trim().toUpperCase()); // YAMADA
console.log(rawInput.trim().slice(0, 3));   // Yam  先頭から 3 文字

// 切り出した結果どうしを + でつなぐこともできる
console.log(rawInput.trim().slice(0, 1).toUpperCase() + "…");  // Y…

console.log(rawInput.length);               // 10  元の値は空白を含んだまま

メソッドは元の文字列を変えません

trim や toUpperCase は整えた結果を新しい文字列として返すだけで、呼び出した変数の中身はそのままです。結果を使いたいときは変数で受け取るか、上の例のように次のメソッドへつなげて書きます。

入力欄から受け取った表示名を、画面に出せる形に整えます。表示名 rawName と会員 ID memberId は宣言済みです。

① 前後の空白を取り除いた表示名を表示してください。

② ① の表示名の先頭 1 文字だけを大文字にして表示してください。

③ 会員 ID と ② の表示名を 1 行の案内文にまとめて表示してください。案内文は「会員番号 1042 の Hanako さん、ようこそ」の形にしてください。

（正しく実行できれば解説が表示されます）

文字列の中を調べる — includes / startsWith / indexOf

入力されたメールアドレスに @ が無ければ、保存する前に差し戻したいところです。注文コードが ORD- で始まるかどうかで、扱いを変えたい場面もあります。こうした確認には、文字列の中を調べるメソッドを使います。

includes は指定した文字列がどこかに含まれるかを、startsWith は先頭がその文字列で始まるかを、それぞれ true か false で返します。

位置そのものを知りたいときは indexOf を使い、見つかった先頭からの位置が数値で返ります。見つからなかったときは -1 が返るので、含まれているかどうかの判定にも使えます。

const orderCode = "ORD-2026-0042";

console.log(orderCode.includes("2026"));    // true   どこかに含まれる
console.log(orderCode.startsWith("ORD-"));  // true   先頭が一致する

console.log(orderCode.indexOf("-"));        // 3      先頭を 0 として数えた位置
console.log(orderCode.indexOf("SHIP"));     // -1     見つからない

console.log(orderCode.slice(4));            // 2026-0042  位置 4 から最後まで

indexOf が返す位置と slice を組み合わせると、区切り記号の後ろだけを取り出せます。@ の位置が分かれば、slice にその位置の 1 つ後ろを渡すことで、メールアドレスのドメイン部分が得られます。

会員登録フォームに打ち込まれたメールアドレスを確認します。登録済みの連絡先 contactEmail と、入力欄に打ち込まれた文字列 typedEmail は宣言済みです。

① typedEmail にアットマーク @ が含まれているかを表示してください。

② contactEmail のうち、アットマーク @ より後ろのドメイン部分を表示してください。

③ contactEmail が sato で始まるかどうかを表示してください。

区切って組み直す — split と join

CSV の 1 行やタグの入力欄のように、1 本の文字列に複数の値が詰まっていることがあります。項目ごとに扱うには区切り記号で切り分ける必要があり、逆に画面へ出すときは 1 本につなぎ直します。この切り分けが split、つなぎ直しが join です。

split には区切りに使う文字を渡します。split(",") ならカンマの位置で切り分け、切り分けた結果は配列（複数の値を順番に並べて 1 つにまとめた値）で返ります。join は逆向きで、間に挟む文字を渡すと 1 本の文字列に戻ります。

const tagLine = "キッチン,保温,ギフト";   // タグ入力欄の中身

const tags = tagLine.split(",");   // カンマの位置で分ける
console.log(tags.length);          // 3   分かれた個数
console.log(tags[0]);              // キッチン  位置 0 = 先頭の値
console.log(tags[2]);              // ギフト    位置 2 = 3 つ目の値

console.log(tags.join(" / "));     // キッチン / 保温 / ギフト
console.log("2026-09-02".split("-").join("/"));  // 2026/09/02

分かれた値は位置で取り出します

split が返す配列からは、tags[0] のように先頭を 0 として数えた位置を角括弧に書いて 1 つずつ取り出します。配列そのものの追加・削除といった操作は、配列の記事であらためて扱います。

注文明細を 1 行の CSV として受け取りました。会員 ID・商品名・単価・数量がカンマ区切りで並んだ文字列 csvLine が宣言済みです。

① カンマで区切ったときの項目数を表示してください。

② 区切ったうちの商品名だけを表示してください。

③ 区切ったすべての項目を「 | 」で挟んでつなぎ直し、1 行で表示してください。

置き換えと桁そろえ — replaceAll と padStart

電話番号のハイフンを取り除いて保存したい、注文番号を 6 桁の 0 埋めにそろえて表示したい。こうした「受け取った文字列を決まった形に直す」処理には、replaceAll と padStart を使います。

replaceAll には探す文字列と置き換える文字列を渡します。空文字列 ""（引用符の間に何も書かない、長さ 0 の文字列）に置き換えれば、その文字を取り除いたのと同じ結果です。

padStart にはそろえたい長さと埋める文字（省くと半角空白）を渡し、長さが足りない分だけ先頭に埋め文字が足されます。元の文字列がすでにその長さ以上なら、何も足されずそのまま返ります。

const rawCode = "ord 2026 0042";   // 空白区切りで入力された注文コード

console.log(rawCode.replaceAll(" ", "-"));  // ord-2026-0042
console.log("090-1234-5678".replaceAll("-", ""));  // 09012345678

console.log("42".padStart(6, "0"));   // 000042  6 桁になるまで 0 を足す
console.log("42".padStart(6));        //     42  埋め文字を省くと半角空白
console.log("1200".padStart(3, "0")); // 1200    すでに 3 桁以上なのでそのまま

採番された注文番号と、入力された電話番号を保存できる形に直します。注文番号 orderNumber と電話番号 rawPhone は宣言済みです。

① 注文番号を 6 桁になるまで先頭に 0 を足して表示してください。

② ① の結果の前に ORD- を付けた注文コードを表示してください。

③ 電話番号からハイフンをすべて取り除いて表示してください。