Use of apostrophe vs single quote/backtick

Question

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.

Backticks are ES6/2015 for template literals - they're good to know but not required https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals - I would add though they can make code a lot more readable — StudioTime, Mar 12 '17 at 21:10
Surely you've also almost always exclusively not use `${…}` patterns in your strings? — Bergi, Jun 21 '17 at 18:45
A very similar/related question [here](https://stackoverflow.com/q/27678052/465053). — RBT, Jul 27 '17 at 05:13
"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, Jan 31 '19 at 21:18

Peter Behr · Accepted Answer · 2018-04-28T00:38:38.623

11

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!

edited Apr 28 '18 at 00:38

answered Mar 12 '17 at 21:10

Peter Behr

607
1
5
16

Cookie · Answer 2 · 2019-01-29T12:38:50.460

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

Use of apostrophe vs single quote/backtick

2 Answers2

Linked