javascriptで文字列の中で変数を使う方法が知りたい。

javascriptの''の中で変数を使う方法が知りたいです。javascriptでは式展開が使えないということですが、やはり最新のES6を使って式展開をする方法以外はないでしょうか？具体的には下記の場所で変数を使いたいです。よろしくお願いします。

$('ここで変数@indexを使いたい').html("<%= j(render partial: 'like', locals: { post: @post,i: @index,like:@likes }) %>");

@indexの定義部分

  @index = params[:index]

viewファイル

<% if user_signed_in? %>
 <% if post.like_user(current_user.id) %>
  <%= button_to "/posts/#{post.id}/unlike",params:{index: i}, method: :delete, id: i, remote: true do %>
   <%= image_tag("icon_red_heart.svg") %>
   <span>
     <%= post.likes_count %>
   </span>
  <% end %>

viewファイルで出力されたHTML
each_with_indexでidをふっているので、下記と同じものでidだけが異なるものがひとつのページに多くあるというイメージです。

 <form class="button_to" method="post" action="/posts/16/like" data-remote="true"><button id="0" type="submit">
   <img src="/assets/icon_heart-ce229fb5b842bba5a3bf498493eecc5a.svg" alt="Icon heart" />
   <span>
     0
   </span>
</button><input type="hidden" name="authenticity_token" value="blU6kMq62zJ/HKQ5dmLC0ymeRROBt6cq67/rrcIV2J5QrasNijT6Hx9Zdx/eymsZXM7FrBOejLMkp3MzQZZ8yA==" /><input type="hidden" name="index" value="0" /></form>

私のやりたいことはviewファイルのid: iをjsファイルで認識してくれることです！

himakuma

2016/10/31 02:16

テンプレートエンジンを使用するということですか？@indexの定義部分の記載を教えてください。

kei344

2016/10/31 10:01

Railsを使用した、Railsの変数の話なのであれば、質問タグに「Rails」を追加されてはいかがでしょう。

kei344

2016/10/31 10:18

viewファイルで出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記ください。

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

回答4件

記法的にRailsのようですが、「Rails側で生成してしまう」という手段は使えないのでしょうか。

投稿2016/10/31 02:25

maisumakun

総合スコア145184

Masaya_Murakami

2016/10/31 09:54

コメントコメントありがとうございます。具体的にはどういうことでしょうか？知識不足なので教えてもらえると幸いです。

maisumakun

2016/10/31 12:51

無理矢理感はありますが、$("<%= @indexを使った式 %>")のようにすれば、とりあえずはできそうです。

Masaya_Murakami

2016/10/31 13:44

# + <%= @index %>でid指定ができるということでしょうか？試してみます！

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

やはり最新のES6を使って式展開をする方法以外はないでしょうか？

JavaScriptではシングルクォート、ダブルクォート問わず式展開は存在しません。
AltJSでは式展開の使える言語が存在しますが、コンパイルすると下記のように変更されます。

JavaScript
1// LiveScript
2hoge = 123
3console.log "#hoge"
4
5// JavaScript (compiled)
6var hoge;
7hoge = 123;
8console.log(hoge + "");

PHP等の他言語で使えるのに、JavaScriptでは使えないので要望としてあり、ES6で実装されたのでしょう。

投稿2016/10/31 02:15

miyabi-sun

総合スコア21158

Masaya_Murakami

2016/10/31 09:56

コメントありがとうございます。では、$()の中で変数は使えないということでしょうか？ ES6を導入する手段が一番効率的かどうか悩んでいます。

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

ベストアンサー

単純に i で出力された値を使用したいのであれば。

JavaScript
1[].forEach.call( document.querySelectorAll( '.button_to' ), ele => {
2	let id = ele.querySelector( 'input[name="index"]' ).value;
3	console.log( ele );
4	console.log( id );
5} );
6```**動くサンプル：**[https://jsfiddle.net/Lbbcnjz3/](https://jsfiddle.net/Lbbcnjz3/)
7
8【querySelectorAllで帰ってきたNodeListを外部ライブラリを使わずにforEachしたい - Qiita】
9[http://qiita.com/yugo-yamamoto/items/b87470f118ac62dc6a8d](http://qiita.com/yugo-yamamoto/items/b87470f118ac62dc6a8d)
10
11---
12
13みんなが避ける jQuery で。
14
15```JavaScript
16// jQuery
17$( '.button_to' ).each( function() {
18	let id = $( this ).find( 'input[name="index"]' ).val();
19	console.log( this );
20	console.log( id );
21} );