{"id":29846,"date":"2019-04-30T21:18:53","date_gmt":"2019-04-30T13:18:53","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29846"},"modified":"2019-04-26T15:58:17","modified_gmt":"2019-04-26T07:58:17","slug":"ecmascript-6-template-literals","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/","title":{"rendered":"How to Use ES6 Template Literals in JavaScript"},"content":{"rendered":"

In programming, the term \u201cliteral\u201d<\/strong> refers to the notation of values<\/strong> in code. For instance, we notate a string value with a string literal<\/strong> that are characters enclosed in double or single quotes (\"foo\"<\/code>, 'bar'<\/code>, \"This is a string!\"<\/code>).<\/p>\n

Template literals<\/a><\/strong> were introduced in ECMAScript 6<\/strong>. They work quite similarly to string literals; they produce template values<\/strong> and raw template values<\/strong>, both of which are strings.<\/p>\n

However, unlike string literals, template literals can produce values that are multi-lined strings<\/strong>, something you can achieve in a string literal only by adding new line characters<\/strong> (\\n<\/code>) to it.<\/p>\n

Template literals can also create strings with other values<\/strong> (derived from expressions) for which you would have to use the plus operator<\/strong> in a string literal (\"your id is:\" + idNo<\/code>; where idNo<\/code> is a variable expression with a numeric value).<\/p>\n

All these features make template literals more preferable to create string values<\/strong>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tECMAScript 6 \u2013 10 Awesome New Features<\/a>\n\t\t\t\t<\/p>\n

Syntax of template literals<\/h2>\n

The delimiter of a template literal is the backtick `<\/code> character<\/strong> (also know as backquote character or grave accent symbol). An expression inside the literal (the value of which is evaluated during runtime<\/strong> and included in the final value produced by the literal) is enclosed in curly braces {}<\/code><\/strong> with a preceding dollar sign $<\/code><\/strong>.<\/p>\n

\r\n`string ${someExpression} more string`\r\n<\/pre>\n
Here are some examples of template literals<\/strong> producing unchanged<\/strong>, substituted<\/strong> (expressions replaced with their evaluated values), and multi-lined<\/strong> strings.<\/p>\n
\r\nconsole.log(`hello`);\r\n\/\/ hello\r\n\r\nvar name = \"Joan\";\r\nconsole.log(`hello ${name}`);\r\n\/\/ hello Joan\r\n\r\nconsole.log(`Dear Joan,\r\nWelcome.`);\r\n\/\/ Dear Joan,\r\n\/\/ Welcome.\r\n<\/pre>\n
Escaping & raw template values<\/h2>\n
In a template literal, the `<\/code> (backtick), \\<\/code> (backslash), and $<\/code> (dollar sign) characters should be escaped<\/strong> using the escape character \\<\/code><\/strong> if they are to be included in their template value.<\/p>\n
By default, all escape sequences in a template literal are ignored<\/strong>. If you want to include it in the output, you need to use its raw template value<\/strong>.<\/p>\n
\r\nconsole.log(`inline code in markup: \\`code\\``);\r\n\/\/ inline code in markup: `code`\r\n\r\nvar name = \"Joan\";\r\n\r\nconsole.log(`hello \\${name}.`);\r\n\/\/ hello ${name}.\r\n\r\nconsole.log(String.raw`hello \\${name}.`);\r\n\/\/ hello \\${name}.\r\n<\/pre>\n
The String.raw<\/code><\/a> method outputs raw template values<\/strong> (the raw string form of a template literal). In the above code, the function call of the raw<\/code> method is referred to as \u201ctagged template\u201d<\/strong>.<\/p>\n
Tagged templates<\/h2>\n
A tagged template is a function call<\/strong> where, in place of the usual parentheses<\/strong> (with optional parameters) besides the function name, there\u2019s a template literal<\/strong> from which the function gets its arguments.<\/p>\n
So, instead of calling a function like this:<\/p>\n
\r\nfoo(ArgumentsForFoo);\r\n<\/pre>\n
It is called like this:<\/p>\n
\r\nfoo`ATemplateStringProvidingArgumentsForFoo`;\r\n<\/pre>\n
The function foo<\/code> is called a tag function<\/strong>. Its first argument received from the template literal is an array<\/strong> called the template object<\/strong>.<\/p>\n
The template object (an array) holds all the string values<\/strong> interpreted from the template literal and has a raw<\/code> property (another array) that holds all the raw (un-escaped) string values<\/strong> interpreted from the same literal.<\/p>\n
Following the template object, the arguments of the tag function include all the evaluated<\/em> external values<\/strong> present in that literal (the ones enclosed in the curly braces ${}<\/code>).<\/p>\n
In the code below, the foo<\/code> function is created to output its arguments<\/strong>. The function is then called in the tagged template fashion<\/strong>, with a template literal carrying two expressions (name<\/code> and id<\/code>).<\/p>\n
\r\nvar name = \"John\";\r\nvar id = 478;\r\n\r\nfoo`hello ${name}. your id is: ${id}.`;\r\n\r\nfunction foo(){\r\n  console.log(arguments[0]);\r\n  \/\/ Array [ \"hello \", \". your id is: \", \".\" ]\r\n\r\n  console.log(arguments[1]);\r\n  \/\/ John\r\n\r\n  console.log(arguments[2]);\r\n  \/\/ 478\r\n}\r\n<\/pre>\n
The first argument outputted is the template object<\/strong> carrying all the strings interpreted from the template literal, the second and third arguments are the evaluated values<\/strong> of the expressions, name<\/code> and id<\/code>.<\/p>\n
The raw<\/code> property<\/h3>\n
As mentioned before, the template object has a property called raw<\/a><\/code><\/strong> which is an array containing all the raw (un-escaped) string values<\/strong> interpreted from the template literal. This is how you can access the raw<\/code> property:<\/p>\n
\r\nvar name1 = \"John\",\r\nname2 = \"Joan\";\r\n\r\nfoo`hello \\${name1}, ${name2}, how are you both?`;\r\n\r\nfunction foo(){\r\n  console.log(arguments[0]);\r\n  \/\/ Array [\"hello ${name1}, \",\", how are you both?\"]\r\n\r\n  console.log(arguments[0].raw);\r\n  \/\/ Array [\"hello \\${name1}, \",\", how are you both?\"]\r\n\r\n  console.log(arguments[1]);\r\n  \/\/ Joan\r\n}\r\n<\/pre>\n
Use cases of tagged templates<\/h3>\n
Tagged templates are useful when you need to break a string<\/strong> into separate parts like it\u2019s often the case in a URL, or while parsing a language. You\u2019ll find a collection of tagged template examples here<\/a><\/strong>.<\/p>\n
Other than IE, template literals are supported in all major browsers<\/strong>.<\/p>\n
Below, you can find some examples of tag functions with different signatures<\/a><\/strong> that represent the arguments:<\/p>\n
\r\nvar name = \"John\";\r\n\r\nfoo`hello ${name}, how are you both?`;\r\nbar`hello ${name}, how are you both?`;\r\n\r\n\r\nfunction foo(...args){\r\n  console.log(args);\r\n  \/\/ Array [ Array [\"hello \",\", how are you both?\"], \"John\"]\r\n}\r\n\r\nfunction bar(strVals, ...exprVals){\r\n  console.log(strVals);\r\n  \/\/ Array [ \"hello \", \", how are you both?\" ]\r\n\r\n  console.log(exprVals);\r\n  \/\/ Array [ \"John\" ]\r\n}\r\n<\/pre>\n
In the bar<\/code> function, the first parameter (strVals<\/code>) is the template object<\/strong> and the second one (that uses the spread syntax<\/a>) is an array that gathered all the evaluated expression values<\/strong> from the template literal passed to the function.<\/p>\n
Put the string together<\/h3>\n
If you want to obtain the whole sentence<\/strong> (derived from the literal) inside the tag function, concatenate all values<\/strong> of the arrays carrying the template strings and the evaluated expression values. Like this:<\/p>\n
\r\nfunction foo(strs, ...exprs) {\r\n\r\n  \/\/ if there are any expressions included in the literal\r\n  if (exprs.length !== 0) {\r\n      var n = strs.length - 1,\r\n      \t\tresult = '';\r\n      for (var i = 0; i < n; i++) {\r\n          result += strs[i] + exprs[i];\r\n      }\r\n      result += strs[n];\r\n      console.log(result);\r\n      \/\"Hello John.\"\r\n  }\r\n\r\n  \/\/ if there are no expressions included in the literal\r\n  else\r\n  console.log(strs[0]);\r\n}\r\n\r\nname = 'John';\r\n\r\nfoo`Hello ${name}.`;\r\n<\/pre>\n
The strs<\/code> array holds all the strings<\/strong> found in the literal and exprs<\/code> holds all the evaluated expression values<\/strong> from the literal.<\/p>\n
If even one expression value exists concatenate each array value of strs<\/code> (except the last one) with the same-index value of exprs<\/code>. Then, at the end, add the last value of the strs<\/code> array to the concatenated string, forming a complete sentence<\/strong> this way.<\/p>\n
\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t4 Useful JavaScript Statements You Should Know<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"
In programming, the term \u201cliteral\u201d refers to the notation of values in code. For instance, we notate a string value with a string literal that are characters enclosed in double or single quotes (“foo”, ‘bar’, “This is a string!”). Template literals were introduced in ECMAScript 6. They work quite similarly to string literals; they produce…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[3687,4117,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Use ES6 Template Literals in JavaScript - Hongkiat<\/title>\n<meta name=\"description\" content=\"In programming, the term "literal" refers to the notation of values in code. For instance, we notate a string value with a string literal that are\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use ES6 Template Literals in JavaScript\" \/>\n<meta property=\"og:description\" content=\"In programming, the term "literal" refers to the notation of values in code. For instance, we notate a string value with a string literal that are\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-30T13:18:53+00:00\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ecmascript-6-template-literals\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ecmascript-6-template-literals\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Use ES6 Template Literals in JavaScript\",\"datePublished\":\"2019-04-30T13:18:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ecmascript-6-template-literals\\\/\"},\"wordCount\":744,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"ECMAScript\",\"Javascripts\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ecmascript-6-template-literals\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ecmascript-6-template-literals\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ecmascript-6-template-literals\\\/\",\"name\":\"How to Use ES6 Template Literals in JavaScript - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2019-04-30T13:18:53+00:00\",\"description\":\"In programming, the term \\\"literal\\\" refers to the notation of values in code. For instance, we notate a string value with a string literal that are\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ecmascript-6-template-literals\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ecmascript-6-template-literals\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ecmascript-6-template-literals\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use ES6 Template Literals in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use ES6 Template Literals in JavaScript - Hongkiat","description":"In programming, the term \"literal\" refers to the notation of values in code. For instance, we notate a string value with a string literal that are","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/","og_locale":"en_US","og_type":"article","og_title":"How to Use ES6 Template Literals in JavaScript","og_description":"In programming, the term \"literal\" refers to the notation of values in code. For instance, we notate a string value with a string literal that are","og_url":"https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-04-30T13:18:53+00:00","author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Use ES6 Template Literals in JavaScript","datePublished":"2019-04-30T13:18:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/"},"wordCount":744,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["ECMAScript","Javascripts","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/","url":"https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/","name":"How to Use ES6 Template Literals in JavaScript - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2019-04-30T13:18:53+00:00","description":"In programming, the term \"literal\" refers to the notation of values in code. For instance, we notate a string value with a string literal that are","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/ecmascript-6-template-literals\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use ES6 Template Literals in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7Lo","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=29846"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29846\/revisions"}],"predecessor-version":[{"id":41984,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29846\/revisions\/41984"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=29846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=29846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=29846"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=29846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}