what is the usage of backtick ` other than string interpolation in javascript

Asked Dec 09 '20 at 16:32

Active Dec 09 '20 at 16:35

Viewed 150 times

I just came into this code (styled-components library)

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`

it seems that styled.button is a function but what is the use of the backtick here?

asked Dec 09 '20 at 16:32

Ali Faris

17,754
10
45
70

Easy way to make multi-line string constants. Also using a backtick string with a function like that *calls* the function. – Pointy Dec 09 '20 at 16:32
It's a tagged template. `\`` defines a template and `styled.buttons` modifies it. – VLAZ Dec 09 '20 at 16:33
the return value is react component – Ali Faris Dec 09 '20 at 16:33
3

That's a *really confusing way* of using a tagged template literal instead of a plain function call. Not recommended since it's so confusing, better to just call the function normally. See https://stackoverflow.com/a/64993999 – CertainPerformance Dec 09 '20 at 16:34
@CertainPerformance Looking at the [styled-components](https://styled-components.com/docs/basics) documentation it seems to be their recommended syntax – abney317 Dec 09 '20 at 16:37
Ew. That's unfortunate. – CertainPerformance Dec 09 '20 at 16:39

what is the usage of backtick ` other than string interpolation in javascript

0 Answers0