How do I concatenate two strings in javascript?

Question

I want to concatenate two string in angular 7.

the function is:

getEmployment(id: number): Observable<Employment> {
    const url = '${this.EmploymentUrl}/${id}';
    return this.http.get<Employment>(url).pipe(
      tap(_ => this.log('fetched employment id=${id}')),
      catchError(this.handleError<Employment>('getEmployment id=${id}'))
    );
  }

However, when I inspect element in my web browser it shows that {id} is not found.

If I replace the second line with the following it works just fine.

const url = this.EmploymentUrl + '/' + id;

After a lot of googling I can't figure out why the first method doesn't work. Why doesn't it work and what is the difference between the two methods?

are you using backticks ? From the code it seems like you are using quote. — gunjit, May 22 '19 at 12:47
Possible duplicate of [What does ${} (dollar sign and curly braces) mean in a string in Javascript?](https://stackoverflow.com/questions/35835362/what-does-dollar-sign-and-curly-braces-mean-in-a-string-in-javascript) — Prashant Pimpale, May 22 '19 at 12:48
For template literals to work (`${id}`), you need to use backticks (`\``) instead of single quotes (`'`) — ShamPooSham, May 22 '19 at 12:49

score 0 · Accepted Answer · answered May 22 '19 at 12:50

You should use `` instead of quotes. more info here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

getEmployment(id: number): Observable<Employment> {
        const url = `${this.EmploymentUrl}/${id}`;
        return this.http.get<Employment>(url).pipe(
          tap(_ => this.log(`fetched employment id=${id}`)),
          catchError(this.handleError<Employment>(`getEmployment id=${id}`))
        );
      }

score 0 · Answer 2 · answered May 22 '19 at 12:51

Beacuase you are using quote (') instead backtick (`)

getEmployment(id: number): Observable<Employment> {
    const url = `${this.EmploymentUrl}/${id}`;
    return this.http.get<Employment>(url).pipe(
      tap(_ => this.log('fetched employment id=${id}')),
      catchError(this.handleError<Employment>('getEmployment id=${id}'))
    );
  }

score 0 · Answer 3 · answered May 22 '19 at 12:51

0

The answer was simply that I have to use backpacks (`) instead of single quotes (')

Like so:

 const url = `${this.EmploymentUrl}/${id}`;

answered May 22 '19 at 12:51

KHans

89
2
8

1

backpacks or backticks? :-) – ConnorsFan May 22 '19 at 13:00

score 0 · Answer 4 · answered May 22 '19 at 13:23

0

Or you can just do a simple string concat like

const url:string = this.Employment+'/'+id; // id will be converted into a string

answered May 22 '19 at 13:23

Richie50

71
1
7

How do I concatenate two strings in javascript?

4 Answers4