What is the purpose of template literals (backticks) following a variable definition in ES6?
In GraphQL you can write something like this to define a query:
const USER_QUERY = gql`
{
user(id: 2) {
name
}
}
`
In styled components you can define a styled component like this:
const Button = styled.button`
background-color: papayawhip;
`
What is this syntax? I know with template literals you can sub in variables with this syntax: ${foo} but I have never seen this used. Any guidance would be appreciated.
javascript ecmascript-6 graphql styled-components template-literals
asked Nov 27 '18 at 20:53
Kurt William
30037
add a comment |
In GraphQL you can write something like this to define a query:
const USER_QUERY = gql`
{
user(id: 2) {
name
}
}
`
In styled components you can define a styled component like this:
const Button = styled.button`
background-color: papayawhip;
`
What is this syntax? I know with template literals you can sub in variables with this syntax: ${foo} but I have never seen this used. Any guidance would be appreciated.
javascript ecmascript-6 graphql styled-components template-literals
asked Nov 27 '18 at 20:53
Kurt William
30037
2
Where is this example coming from?
– Hogan
Nov 27 '18 at 20:54
1
these are examples of how queries and styled components can be instantiated via those libraries, to exemplify the question on this syntax
– Dacre Denny
Nov 27 '18 at 20:56
3
Tagged template literals?
– HynekS
Nov 27 '18 at 20:57
Backticks calling a function || What is the usage of the backtick symbol (`) in JavaScript? (which mentions tagged template literal, but not in the first answer)
– user202729
Nov 28 '18 at 4:25
add a comment |
In GraphQL you can write something like this to define a query:
const USER_QUERY = gql`
{
user(id: 2) {
name
}
}
`
In styled components you can define a styled component like this:
const Button = styled.button`
background-color: papayawhip;
`
What is this syntax? I know with template literals you can sub in variables with this syntax: ${foo} but I have never seen this used. Any guidance would be appreciated.
javascript ecmascript-6 graphql styled-components template-literals
asked Nov 27 '18 at 20:53
Kurt William
30037
In GraphQL you can write something like this to define a query:
const USER_QUERY = gql`
{
user(id: 2) {
name
}
}
`
In styled components you can define a styled component like this:
const Button = styled.button`
background-color: papayawhip;
`
What is this syntax? I know with template literals you can sub in variables with this syntax: ${foo} but I have never seen this used. Any guidance would be appreciated.
javascript ecmascript-6 graphql styled-components template-literals
javascript ecmascript-6 graphql styled-components template-literals
asked Nov 27 '18 at 20:53
Kurt William
30037
asked Nov 27 '18 at 20:53
Kurt William
30037
asked Nov 27 '18 at 20:53
Kurt William
30037
asked Nov 27 '18 at 20:53
Kurt William
30037
asked Nov 27 '18 at 20:53
Kurt William
30037
30037
2
Where is this example coming from?
– Hogan
Nov 27 '18 at 20:54
1
these are examples of how queries and styled components can be instantiated via those libraries, to exemplify the question on this syntax
– Dacre Denny
Nov 27 '18 at 20:56
3
Tagged template literals?
– HynekS
Nov 27 '18 at 20:57
Backticks calling a function || What is the usage of the backtick symbol (`) in JavaScript? (which mentions tagged template literal, but not in the first answer)
– user202729
Nov 28 '18 at 4:25
add a comment |
2
Where is this example coming from?
– Hogan
Nov 27 '18 at 20:54
1
these are examples of how queries and styled components can be instantiated via those libraries, to exemplify the question on this syntax
– Dacre Denny
Nov 27 '18 at 20:56
3
Tagged template literals?
– HynekS
Nov 27 '18 at 20:57
Backticks calling a function || What is the usage of the backtick symbol (`) in JavaScript? (which mentions tagged template literal, but not in the first answer)
– user202729
Nov 28 '18 at 4:25
2
2
Where is this example coming from?
– Hogan
Nov 27 '18 at 20:54
Where is this example coming from?
– Hogan
Nov 27 '18 at 20:54
1
1
these are examples of how queries and styled components can be instantiated via those libraries, to exemplify the question on this syntax
– Dacre Denny
Nov 27 '18 at 20:56
these are examples of how queries and styled components can be instantiated via those libraries, to exemplify the question on this syntax
– Dacre Denny
Nov 27 '18 at 20:56
3
3
Tagged template literals?
– HynekS
Nov 27 '18 at 20:57
Tagged template literals?
– HynekS
Nov 27 '18 at 20:57
Backticks calling a function || What is the usage of the backtick symbol (`) in JavaScript? (which mentions tagged template literal, but not in the first answer)
– user202729
Nov 28 '18 at 4:25
Backticks calling a function || What is the usage of the backtick symbol (`) in JavaScript? (which mentions tagged template literal, but not in the first answer)
– user202729
Nov 28 '18 at 4:25
add a comment |
2 Answers
2
active
oldest
votes
These are tagged template literals. The part before the backpacks is a reference to a function that will be called to process the string.
The function is passed the variables (the ${} parts) as arguments as well as the pieces of the string that surround the variables broken into an array. The return value of the function becomes the value of the template. Because of this very generalized format, you can do almost anything with the function. Here's a quick and dirty example that takes the variables (gathered into an array for convenience), makes them uppercase, and puts them back in the string:
function upperV(strings, ...vars) {
/* make vars uppercase */
console.log("vars: ", vars) // an array of the passed in variables
console.log("strings:", strings) // the string parts
// put them together
return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}
let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${'man'} had split before...`;
console.log(output)answered Nov 27 '18 at 20:58
Mark Meyer
35.9k32958
add a comment |
Template literals have an additional feature called tagged templates. That's what the prefix before the opening backtick is. The prefix is actually the name of a function - the function is passed the constant parts of the template strings and the interpolated values (stuff in the ${} sections) and can process the resulting string into whatever it wants (although generally another string, doesn't have to be).
See this page on MDN for more details on how tagged templates work.
answered Nov 27 '18 at 20:57
Chris Tavares
18.9k33660
"the function is passed the constant parts of the template strings" - what does this mean?
– ESR
Nov 28 '18 at 3:31
It's the parts of the template string that aren't in the${}blocks. Read the page I linked to, it has all the details.
– Chris Tavares
Nov 28 '18 at 6:32
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53507972%2fwhat-is-the-purpose-of-template-literals-backticks-following-a-variable-defini%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
These are tagged template literals. The part before the backpacks is a reference to a function that will be called to process the string.
The function is passed the variables (the ${} parts) as arguments as well as the pieces of the string that surround the variables broken into an array. The return value of the function becomes the value of the template. Because of this very generalized format, you can do almost anything with the function. Here's a quick and dirty example that takes the variables (gathered into an array for convenience), makes them uppercase, and puts them back in the string:
function upperV(strings, ...vars) {
/* make vars uppercase */
console.log("vars: ", vars) // an array of the passed in variables
console.log("strings:", strings) // the string parts
// put them together
return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}
let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${'man'} had split before...`;
console.log(output)answered Nov 27 '18 at 20:58
Mark Meyer
35.9k32958
add a comment |
These are tagged template literals. The part before the backpacks is a reference to a function that will be called to process the string.
The function is passed the variables (the ${} parts) as arguments as well as the pieces of the string that surround the variables broken into an array. The return value of the function becomes the value of the template. Because of this very generalized format, you can do almost anything with the function. Here's a quick and dirty example that takes the variables (gathered into an array for convenience), makes them uppercase, and puts them back in the string:
function upperV(strings, ...vars) {
/* make vars uppercase */
console.log("vars: ", vars) // an array of the passed in variables
console.log("strings:", strings) // the string parts
// put them together
return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}
let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${'man'} had split before...`;
console.log(output)answered Nov 27 '18 at 20:58
Mark Meyer
35.9k32958
add a comment |
These are tagged template literals. The part before the backpacks is a reference to a function that will be called to process the string.
The function is passed the variables (the ${} parts) as arguments as well as the pieces of the string that surround the variables broken into an array. The return value of the function becomes the value of the template. Because of this very generalized format, you can do almost anything with the function. Here's a quick and dirty example that takes the variables (gathered into an array for convenience), makes them uppercase, and puts them back in the string:
function upperV(strings, ...vars) {
/* make vars uppercase */
console.log("vars: ", vars) // an array of the passed in variables
console.log("strings:", strings) // the string parts
// put them together
return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}
let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${'man'} had split before...`;
console.log(output)answered Nov 27 '18 at 20:58
Mark Meyer
35.9k32958
These are tagged template literals. The part before the backpacks is a reference to a function that will be called to process the string.
The function is passed the variables (the ${} parts) as arguments as well as the pieces of the string that surround the variables broken into an array. The return value of the function becomes the value of the template. Because of this very generalized format, you can do almost anything with the function. Here's a quick and dirty example that takes the variables (gathered into an array for convenience), makes them uppercase, and puts them back in the string:
function upperV(strings, ...vars) {
/* make vars uppercase */
console.log("vars: ", vars) // an array of the passed in variables
console.log("strings:", strings) // the string parts
// put them together
return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}
let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${'man'} had split before...`;
console.log(output)function upperV(strings, ...vars) {
/* make vars uppercase */
console.log("vars: ", vars) // an array of the passed in variables
console.log("strings:", strings) // the string parts
// put them together
return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}
let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${'man'} had split before...`;
console.log(output)function upperV(strings, ...vars) {
/* make vars uppercase */
console.log("vars: ", vars) // an array of the passed in variables
console.log("strings:", strings) // the string parts
// put them together
return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}
let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${'man'} had split before...`;
console.log(output)answered Nov 27 '18 at 20:58
Mark Meyer
35.9k32958
edited Nov 28 '18 at 5:16
answered Nov 27 '18 at 20:58
Mark Meyer
35.9k32958
answered Nov 27 '18 at 20:58
Mark Meyer
35.9k32958
answered Nov 27 '18 at 20:58
Mark Meyer
35.9k32958
35.9k32958
add a comment |
add a comment |
Template literals have an additional feature called tagged templates. That's what the prefix before the opening backtick is. The prefix is actually the name of a function - the function is passed the constant parts of the template strings and the interpolated values (stuff in the ${} sections) and can process the resulting string into whatever it wants (although generally another string, doesn't have to be).
See this page on MDN for more details on how tagged templates work.
answered Nov 27 '18 at 20:57
Chris Tavares
18.9k33660
"the function is passed the constant parts of the template strings" - what does this mean?
– ESR
Nov 28 '18 at 3:31
It's the parts of the template string that aren't in the${}blocks. Read the page I linked to, it has all the details.
– Chris Tavares
Nov 28 '18 at 6:32
add a comment |
Template literals have an additional feature called tagged templates. That's what the prefix before the opening backtick is. The prefix is actually the name of a function - the function is passed the constant parts of the template strings and the interpolated values (stuff in the ${} sections) and can process the resulting string into whatever it wants (although generally another string, doesn't have to be).
See this page on MDN for more details on how tagged templates work.
answered Nov 27 '18 at 20:57
Chris Tavares
18.9k33660
"the function is passed the constant parts of the template strings" - what does this mean?
– ESR
Nov 28 '18 at 3:31
It's the parts of the template string that aren't in the${}blocks. Read the page I linked to, it has all the details.
– Chris Tavares
Nov 28 '18 at 6:32
add a comment |
Template literals have an additional feature called tagged templates. That's what the prefix before the opening backtick is. The prefix is actually the name of a function - the function is passed the constant parts of the template strings and the interpolated values (stuff in the ${} sections) and can process the resulting string into whatever it wants (although generally another string, doesn't have to be).
See this page on MDN for more details on how tagged templates work.
answered Nov 27 '18 at 20:57
Chris Tavares
18.9k33660
Template literals have an additional feature called tagged templates. That's what the prefix before the opening backtick is. The prefix is actually the name of a function - the function is passed the constant parts of the template strings and the interpolated values (stuff in the ${} sections) and can process the resulting string into whatever it wants (although generally another string, doesn't have to be).
See this page on MDN for more details on how tagged templates work.
answered Nov 27 '18 at 20:57
Chris Tavares
18.9k33660
answered Nov 27 '18 at 20:57
Chris Tavares
18.9k33660
answered Nov 27 '18 at 20:57
Chris Tavares
18.9k33660
answered Nov 27 '18 at 20:57
Chris Tavares
18.9k33660
18.9k33660
"the function is passed the constant parts of the template strings" - what does this mean?
– ESR
Nov 28 '18 at 3:31
It's the parts of the template string that aren't in the${}blocks. Read the page I linked to, it has all the details.
– Chris Tavares
Nov 28 '18 at 6:32
add a comment |
"the function is passed the constant parts of the template strings" - what does this mean?
– ESR
Nov 28 '18 at 3:31
It's the parts of the template string that aren't in the${}blocks. Read the page I linked to, it has all the details.
– Chris Tavares
Nov 28 '18 at 6:32
"the function is passed the constant parts of the template strings" - what does this mean?
– ESR
Nov 28 '18 at 3:31
"the function is passed the constant parts of the template strings" - what does this mean?
– ESR
Nov 28 '18 at 3:31
It's the parts of the template string that aren't in the
${} blocks. Read the page I linked to, it has all the details.– Chris Tavares
Nov 28 '18 at 6:32
It's the parts of the template string that aren't in the
${} blocks. Read the page I linked to, it has all the details.– Chris Tavares
Nov 28 '18 at 6:32
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53507972%2fwhat-is-the-purpose-of-template-literals-backticks-following-a-variable-defini%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Where is this example coming from?
– Hogan
Nov 27 '18 at 20:54
1
these are examples of how queries and styled components can be instantiated via those libraries, to exemplify the question on this syntax
– Dacre Denny
Nov 27 '18 at 20:56
3
Tagged template literals?
– HynekS
Nov 27 '18 at 20:57
Backticks calling a function || What is the usage of the backtick symbol (`) in JavaScript? (which mentions tagged template literal, but not in the first answer)
– user202729
Nov 28 '18 at 4:25