テンプレートリテラルを入れ子で記述出来ますでしょうか。

「'param-' + ('000' + (index + 1)).slice(-3);」

HTML
1（実行後のHTML）
2<p id="param-001">さまざまなWebサイトでjQueryが活躍しています</p>
3<p id="param-002">jQuery UIはjQueryにウィジェットなどの拡張するプラグインです</p>

上記のコードをテンプレートリテラルで記述したいのですが、どうしてもうまく作動してくれません。
よろしくお願い致します。

「改訂新版jQuery本格入門 P199 リスト5-14」のコードより。一部編集を加えています。

jQuery
1（追記）
2su507さんとCocodeさんのアドバイスから、私なりのコードの読み解き方。
3「`param-${`000${index + 1}`.slice(-3)}`」
4上記のコードは三段階に分けて理解する必要がある。
5
6第一段階 : テンプレートリテラルの一番深い内部部分 : `000${index + 1}`
7第二段階 : テンプレートリテラルの中間部分        : ${第一段階.slice(-3)}
8第三段階 : テンプレートリテラルの外側部分        : `param-第二段階`
9
10こんな感じでしょうか？

jQuery
1$(function() {
2  const param = [
3    `さまざまなWebサイトでjQueryが活躍しています`,
4    `jQuery UIはjQueryにウィジェットなどの拡張するプラグインです`
5  ];
6
7  $.each(param, function(index, text) {
8    const tagId = 'param-' + ('000' + (index + 1)).slice(-3); // 疑問の箇所
9    $('div').append($('<p>', {
10      id   : tagId,
11      text : text
12    }));
13  });
14});

HTML
1<body>
2  <div>
3  </div>
4</body>

jQuery
1失敗例
21. const tagId = `${ param }-000${ index + 1 }.slice(-3)`;
3// idの値がおかしくなる。
4
52. const tagId = `param-${('000'${(index + 1)})}.slice(-3)`;
6// Uncaught SyntaxError: missing ) in parenthetical
7
83. const tagId = `${param}-000`${(index + 1)}`.slice(-3)`;
9// Uncaught SyntaxError: unexpected token: identifier
10
114. const template = `000${index + 1}.slice(-3)`;
12   const tagId    =  `${param}-${template}`;
13// idの値がおかしくなる。

Cocode

2022/09/30 10:36

とりあえず4番は '000${index + 1}.slice(-3)'　が　シングルクオートなのでだめなきがします！

taka_oct092018

2022/09/30 10:55

Cocode様、ご指摘ありがとうございます。修正します。

行動規範の内容に同意します

回答1件

ベストアンサー

入れ子にできます。以下サンプルです。

javascript
1const index = 45;
2const param = 'ID';
3
4const tagId = `${param}-${`000${index + 1}`.slice(-3)}`;
5console.log(tagId); // => "ID-046"

MDN: JavaScript リファレンス- 入れ子のテンプレート

追記

以下のように修正するとよいでしょう：

diff
1- const tagId = 'param-' + ('000' + (index + 1)).slice(-3); // 疑問の箇所
2+ const tagId = `param-${`000${index + 1}`.slice(-3)}`;

codepen 👉 https://codepen.io/su507/pen/OJZvdxR?editors=0012

追記2

テンプレートリテラルを入れ子にできるか？という質問に対しては「できる」が答えになりますがコードが若干読みにくくなることは否めません。今回の場合は以下のようにするのもよいかと思います。

javascript
1$.each(param, function(index, text) {    
2  const id = `${index + 1}`.padStart(3, '0');    
3  $('div').append($('<p>', { id: `param-${id}`, text }));                   
4});

codepen 👉 https://codepen.io/su507/pen/bGMvyLq?editors=0010

上記のように、

ある文字列が指定する長さに足りないときに先頭から指定文字列で埋めたいときは padStart メソッドが便利です。
append に渡す第二引数のオブジェクトリテラルの text : text はコロン以降の : text が不要で text のみに省略できます。

追記3

テンプレートリテラルを入れ子にしなくても色々やりようはあるということで、こんなのもアリかもしれません。

javascript
1$.each(param, function(index, text) {    
2  const id = ['param', `${index + 1}`.padStart(3, '0')].join('-');
3  $('div').append($('<p>', { id, text }));                   
4});

投稿2022/09/30 10:56

編集2022/10/01 03:38

退会済みユーザー

総合スコア0

taka_oct092018

2022/09/30 14:15

su507様、返信ありがとうございます。教えて頂いたコード使ってみた所、以下のような結果になりました。 <p id="さまざまなWebサイトでjQueryが活躍しています, jQuery UIはjQueryにウィジェットなどの拡張するプラグインです-001"> さまざまなWebサイトでjQueryが活躍しています</p> <p id="さまざまなWebサイトでjQueryが活躍しています, jQuery UIはjQueryにウィジェットなどの拡張するプラグインです-002"> jQuery UIはjQueryにウィジェットなどの拡張するプラグインです</p>

退会済みユーザー

2022/09/30 15:35

param は変数名ではなかったんですね。回答に追記しました。

taka_oct092018

2022/10/03 17:44

su507様、すごく丁寧な解説をありがとうございます。文字列の+結合は読みづらいのでテンプレートリテラルにこだわっておりましたが、それ自身もかならずしも最善ではなく、問題処理と可読性の両立にはもっと有効なメソッドがあることを学べました。まだまだ初心者ですが、web開発の勉強を続けていきます。

行動規範の内容に同意します