ES6 & tagged-template-literals & template strings

ES6 & tagged-template-literals & template strings

tagged template

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

demo

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

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://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

demo

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
}

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

demo

"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

---

---

xgqfrms 2012-2020

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

---