CODEWITHSUNDEEP
javascriptreactjs
lilput
lilput

Reputation: 71

How to use const value inside the string in JS

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,
    }));
}

Upvotes: 0

Views: 3113

Answers (3)

Reality
Reality

Reputation: 677

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}`;

Upvotes: 1

Ayaz
Ayaz

Reputation: 2121

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}`;

Upvotes: 3

Alen Vlahovljak
Alen Vlahovljak

Reputation: 574

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.

Upvotes: 1

Related Questions