I'm new to Angular, and while following along to a tutorial I made a slight change out of habit when writing the module states:

.state('sports.medals', {
    url: '/:sportName',
    templateUrl: 'sports/sports-medals.html',
    resolve: {
      sportService: function($http, $stateParams){
        return $http.get('/sports/${ $stateParams.sportName }');
      }
    },

This compiles perfectly fine within the rest of the project, no errors. However, when the call is made to this function, it reads the get contents as one whole string instead of parsing the contents as it should.

The correct way to call this is apparently:

 .state('sports.medals', {
        url: '/:sportName',
        templateUrl: 'sports/sports-medals.html',
        resolve: {
          sportService: function($http, $stateParams){
            return $http.get(`/sports/${ $stateParams.sportName }`);
          }
        },

using the ` apostrophe/backtick instead of the single quote '

As a programmer I've almost always exclusively used the single quote when working with javascript and/or double-quotes within parameters, so this surprised me and wasn't immediately apparent. Is there a reason for this behavior that is documented somewhere? Should I get in the habit of using backticks over single quotes? I would like to avoid other such surprises.

I'm new to Angular, and while following along to a tutorial I made a slight change out of habit when writing the module states:

.state('sports.medals', {
    url: '/:sportName',
    templateUrl: 'sports/sports-medals.html',
    resolve: {
      sportService: function($http, $stateParams){
        return $http.get('/sports/${ $stateParams.sportName }');
      }
    },

This compiles perfectly fine within the rest of the project, no errors. However, when the call is made to this function, it reads the get contents as one whole string instead of parsing the contents as it should.

The correct way to call this is apparently:

 .state('sports.medals', {
        url: '/:sportName',
        templateUrl: 'sports/sports-medals.html',
        resolve: {
          sportService: function($http, $stateParams){
            return $http.get(`/sports/${ $stateParams.sportName }`);
          }
        },

using the ` apostrophe/backtick instead of the single quote '

As a programmer I've almost always exclusively used the single quote when working with javascript and/or double-quotes within parameters, so this surprised me and wasn't immediately apparent. Is there a reason for this behavior that is documented somewhere? Should I get in the habit of using backticks over single quotes? I would like to avoid other such surprises.

• javascript
• angularjs
• syntax

• 2 Backticks are ES6/2015 for template literals - they're good to know but not required developer.mozilla.org/en/docs/Web/JavaScript/Reference/… - I would add though they can make code a lot more readable – StudioTime Commented Mar 12, 2017 at 21:10
• Surely you've also almost always exclusively not use ${…} patterns in your strings? – Bergi Commented Jun 21, 2017 at 18:45
• A very similar/related question here. – RBT Commented Jul 27, 2017 at 5:13
• Did you call the backtick an apostrophe? – ericw31415 Commented May 10, 2018 at 1:41
• "Did you call the backtick an apostrophe?" <- this right here. Apostrophe == Single quote. Backtick is it's own thing, I just did a 10 minute internet search trying to clarify and so many people get it wrong. – user27068 Commented Jan 31, 2019 at 21:18

2 Answers 2

The backticks are necessary for the string interpolation to work. This is an ES6 feature called template interpolation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals.

Sometimes it will be available to you, but it is still far from widespread in terms of browser support https://caniuse.com/#feat=template-literals. Get familiar with it and use it when you can!

Template literals are enclosed by the back-tick ` (grave accent) character instead of double or single quotes.

Template literals / string literals in javascript use the back tick. They are an E6 feature that is simply syntactic sugar for concatenation. Template literals are widely supported in modern browsers and are supported in nodejs. When not using templates you should either use double (") or single (') quotes.

MDN has documentation that will give more information on template literal use: Template literals