ES6 & tagged-template-literals & template strings All In One

ES6 & tagged-template-literals & template strings All In One

tagged templates

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates

function highlight(strings, ...values) {
   let str = '';
   strings.forEach((string, i) => {
       str += string + (values[i] || ``);
   });
   return str;
}

const name = 'Snickers';
const age = '100';
const sentence = highlight`My dog's name is ${name} and he is ${age} years old`;

console.log(sentence);
// My dog's name is Snickers and he is 100 years old

tagged-template-literals

https://github.com/mqyqingfeng/Blog/issues/84

let x = 'Hi', y = 'Kevin';
const res = message`${x}, I am ${y}`;
console.log(res);

// 我们可以自定义 message 函数来处理返回的字符串:

// literals 文字
// 注意在这个例子中 literals 的第一个元素和最后一个元素都是空字符串
function message(literals, value1, value2) {
    console.log(literals); // [ "", ", I am ", "" ]
    console.log(value1); // Hi
    console.log(value2); // Kevin
}

demos

function highlight(strings, ...values) {
  let str = '';
  strings.forEach((string, i) => {
    str += `${string} <span class='hl'>${values[i] || ''}</span>`;
  });
  return str;
}

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2019-08-16
 *
 * @description tagged-template-literals
 * @augments
 * @example
 * @link https://github.com/lydiahallie/javascript-questions#17-whats-the-output
 *
 */

let log = console.log;

function getPersonInfo(one, two, three) {
    log(one);
    log(two);
    log(three);
}

const person = "xgqfrms";
const age = 23;

getPersonInfo`${person} is ${age} years old`;
// [ '', ' is ', ' years old' ]
// xgqfrms
// 23

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

React & styled-components

https://www.styled-components.com/

https://github.com/styled-components/styled-components

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: palevioletred;
  `}
`;

refs

https://wesbos.com/tagged-template-literals/

https://www.leighhalliday.com/tagged-template-literals

https://www.freecodecamp.org/news/es6-tagged-template-literals-48a70ef3ed4d/

https://www.freecodecamp.org/news/a-quick-introduction-to-tagged-template-literals-2a07fd54bc1d/

https://dev.to/sarah_chima/tagged-template-literals-2ho

https://exploringjs.com/impatient-js/ch_template-literals.html#tagged-templates

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---