Javascript: Interpolating variables inside strings

Question

I have the following jquery code which loads the #content div from another page, into the #result div on the current page:

$('a').click(function(event){
  $('#result').load('abother_page.html #content');
});

As you can see, I'm hard-coding the name of the requested file, along with the specific div I want to display, into the string that is sent with the load method.

I'm trying to make this dynamic, but my code is missing something:

// get the href of the link that was clicked
var href=$(this).attr('href');
// pass the href with the load method
$('#result').load('href #content');

Obviously this doesn't work because the href variable that i've created is not interpolated in the string. How can I do that?

I tried the following, all without success:

// Ruby-style: 
$('#result').load('#{href} #content');
// Concatenating-style
$('#result').load(href + '#content');

Joseph · Accepted Answer · 2012-04-23 02:25:02Z

12

add a space indicated by "here":

$('#result').load(href + ' #content');
                          ^---- here

an explanation of the failed attempts are as follows:

//this code used the string "href" as the url
$('#result').load('href #content');

//javascript doesn't have this syntax for wrapping variables like in PHP
$('#result').load('#{href} #content');

//this code appended "#content" like it was a hash tag
$('#result').load(href + '#content');

answered Apr 23, 2012 at 2:25

Joseph

120k31 gold badges186 silver badges238 bronze badges

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

1 Comment

stephenmurdoch Over a year ago

Doh, thanks! This fixes the problem, and thanks a lot for your explanations, that really makes it a lot clearer now

Curiousdev · Accepted Answer · 2017-06-23 11:57:57Z

This has changed.

From 2015 in ES6 this is possible now using Template literals there is way you can read more about on this LINK

Expression interpolation

var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."

In you case

// get the href of the link that was clicked
var href=$(this).attr('href');
// pass the href with the load method
$('#result').load(`${href} #content`);

Collectives™ on Stack Overflow

Javascript: Interpolating variables inside strings

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related