String interpolation in JavaScript

Question

In Ruby you can use string interpolation like so:

text = "This is visit number #{numVisits} to this website"

This bypasses the need for explicit concatenation.

I'm working with jQuery and have a bit like this:

$(document).ready(function(){
    $("a.ajax").click(function(event){
        $("#content").load("data.html this.getClass");
    });
});

The behavior I want is "click on <a class="ajax" id="schedule"></a> and the content div on the current page is replaced by the schedule div from data.html. If I manually write in

load("data.html #test");

that works, but I want the script to load the DIV with the ID value of the anchor clicked. Any help would be swell!

Example Page: http://www.mariahandalex.info/stack/

The phrase you are looking for is variable interpolation, I'm afraid Javascript doesn't have such a feature. en.wikipedia.org/wiki/Variable_interpolation#Interpolation — Danny
– Danny, Commented May 10, 2009 at 19:56
To clarify, I have 6 links, each with a unique ID tag. When I click on a given link, I want that link ID to get passed to the load function: load("data.html #(clickedlinkID); — Alex Mcp
– Alex Mcp, Commented May 10, 2009 at 20:05

Marcos · Accepted Answer · 2015-02-05 15:40:30Z

17

This has changed.

As of 2015 there is now a better way: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

Bringing to JS what many languages like Ruby and PHP have enjoyed already.

For example, in my jQuery driven page I use:

   $('#myModalLabel').html(`Show GRAPH of : ${fundCode}-${funcCode}`);

Which safely renders in my updated Firefox and Chrome as:

Show GRAPH of : AIP001-_sma

Note the use of backticks surrounding the string param in .html(....)

answered Feb 5, 2015 at 15:40

Marcos

4,9706 gold badges43 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Mcp Over a year ago

Oh neat, I haven't seen that yet. Huge red flag on the browser reqs, but nice to know about! Thanks, 6 years later... :-)

Elazar Leibovich · Accepted Answer · 2009-05-11 02:15:43Z

6

You cannot embed javascript code inside a string, but you can concatenate a string to an object using '+' like so

$('#content').load('data.html #' + $(this).getClass());

About embedding code in a string, I don't think it has a name. Groovy calls those strings "Gstring"s, and ruby calls those 'Expression substitution in strings'. I'm not sure it has a standard name.

edited May 11, 2009 at 2:15

answered May 10, 2009 at 19:42

Elazar Leibovich

33.9k36 gold badges129 silver badges175 bronze badges

1 Comment

strager Over a year ago

I think you mean $(this).getClass() or maybe this.className.

AnthonyWJones · Accepted Answer · 2009-05-10 19:41:03Z

5

Javascript doesn't parse string literals looking for replacement markers like Ruby or PHP does. You will have to use concatenation.

answered May 10, 2009 at 19:41

AnthonyWJones

190k35 gold badges236 silver badges307 bronze badges

Comments

slf · Accepted Answer · 2016-01-26 05:04:51Z

5

in es6 this is possible

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

`string text ${expression} string text`

answered Jan 26, 2016 at 5:04

slf

22.8k12 gold badges80 silver badges103 bronze badges

Comments

Gumbo · Accepted Answer · 2009-05-10 21:19:36Z

2

Try this:

$(document).ready(function(){
    $("a.ajax").each(function(){
        var obj = $(this);
        obj.click(function(event){
           alert(obj.attr('id'));
        });
    });
});

edited May 10, 2009 at 21:19

answered May 10, 2009 at 19:34

Gumbo

657k112 gold badges792 silver badges852 bronze badges

5 Comments

Gumbo Over a year ago

@Alex Mcp: Take a look at it now.

geowa4 Over a year ago

'#' + this.getClass()? you probably meant '.'

Alex Mcp Over a year ago

But that will append the Class of the "#content" div. That is where the data is getting shuttled in and out of. I need to find a way to tack on the "ID" attribute of the link that was clicked, because that will identify what gets pulled out of the external page.

Gumbo Over a year ago

I forgot that it’s an jQuery object that gets returned. It works now.

Alex Mcp Over a year ago

I put an example page up. This is so strange, it's only returning the id value for the first in the list of links. Maybe the list is somehow the object, and it thinks it only has one ID? I'm a bit beyond my knowledge here... Thanks so much.

Collectives™ on Stack Overflow

String interpolation in JavaScript

5 Answers 5

1 Comment

1 Comment

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related