How to use const value inside the string in JS

Question

I'm writing React JS code for webpage.

The tutorial says the const value can be used inside the string with ${ } expression.

However, when I try it in my IDLE, it just recognize them as same string not const value.

What should I do to call saved const value inside the string

This is what it is supposed to be: Expected result

This is what I get instead:

Actual result I got instead

async function getHeadlines(search) { const url = 'https://newsapi.org/v2/top-headlines?country=au&apiKey={API_KEY}&q=${search}'; let res = await fetch(url); let data = await res.json(); let articles = data.articles; return articles.map((article) => ({ title: article.title, url: article.url, })); }

Use backticks `, not single quotes. This is the thing to the left of the number 1 key on most keyboards, it shares the key with the "~" — zero298
– zero298, Commented Apr 24, 2021 at 15:31

Ayaz · Accepted Answer · 2021-04-24 15:39:07Z

You need to use backtick. Please go throught Template literals to understand how backtick works.

const url = `https://newsapi.org/v2/top-headlines?country=au&apiKey=${API_KEY}&q=${search}`;

Alen Vlahovljak · Accepted Answer · 2021-04-24 15:34:47Z

As far as I can understand your question, you have to use template strings (check docs for more) for this URL:

const url = https://newsapi.org/v2/top-headlines?country=au&apiKey={API_KEY}&q=${search};

Now you can add API_KEY and search into a string.

Reality · Accepted Answer · 2021-04-24 16:14:33Z

Like everyone else said, you need to use backticks for template literals.

It looks like you are confusing non-template literal strings with template literals and their syntax (you forgot a $ in one of the literal block declarations). Let's have a little review, shall we?

Non-template literal strings look like this:

"This is a string with double quotes. It does not parse literals (${})"; 'This is a string with single quotes. It does not parse literals (${})';

They use either single quotes (') or double quotes (").

Template literals are a special type of string, they allow insertion of variables and/or other data without having to use string concatenation ("This string " + "just got concatenated"). To do so, you have to wrap your code you want outputted in a ${} block, like this:

 const textToInsert = "Hello, world!"; `This is a template literal. It is a string that allows easier concatenation without using the "+" operator. This parses literals, see? "${textToInsert}"`

Since the code is "executed", you can also use ternary operators:

 `A random number I am thinking of is ${Math.floor(Math.random() * 10) >= 5 ? "greater than or equal to five" : "less than five"}`

Template literals are also useful if you use double quotes or single quotes in your string. If you use a single quote to declare a string that uses single quotes, you would have to escape them:

'It\'s a wonderful life'

The same applies to double quote strings using double quotes:

"\"I have no special talent. I am only passionately curious\" - Albert Einstein"

But, if you use template literals, you can use both single and double quotes without escaping them (note that you will have to escape backticks (`)):

` It's a wonderful life. "I have no special talent. I am only passionately curious" - Albert Einstein `

Oh, I forgot to mention - template literals support newlines!!!

The conclusion? Template literals are powerful! You just have to know how to use them :)

So, what would your fixed template literal look like?

It would look like this:

`https://newsapi.org/v2/top-headlines?country=au&apiKey=${API_KEY}&q=${search}`;

Collectives™ on Stack Overflow

How to use const value inside the string in JS

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related