This is the 12th day of my participation in the genwen Challenge

This series also does not have any tricks, is to complete the usual interview some handwriting functions, test these simple implementation of the advantage is that you can see the basic coding level, and take a short time, a more comprehensive view of your code strength. Generally, there are not many boundary conditions, so that the interview time is not enough, the investigation is not comprehensive.

If you don’t know or are not clear about the API, just ask the interviewer directly, how to use the API under Google anyone can immediately understand the knowledge also can’t see the level. The key is in the implementation process, and your coding status, habits, clarity of thought and so on.

Note that it is a simple implementation, not a complete implementation, it is important to clear the concept and clear implementation ideas, it is suggested to explain the concept first => write use cases => write pseudo-code => then realize specific functions, and then optimize, step by step.

19. Template parsing (template string)

What is the

The key points are these two

1. String.prototype.replace()The use of this API

The replace() method returns a new string that replaces some or all of the pattern matches with the replacement value. The pattern can be a string or a regular expression, and the replacement value can be a string or a callback function that is called on every match. If pattern is a string, only the first match is replaced.

grammar

str.replace(regexp|substr, newSubStr|function)

parameter

regexp (pattern)

  • A RegExp object or its literal. What the re matches is replaced by the return value of the second argument.

substr (pattern)

  • A string to be replaced by newSubStr. It is treated as an entire string, not as a regular expression. Only the first match is replaced.

newSubStr (replacement)

  • A string used to replace the matching part of the first argument in the original string. Special variable names can be interpolated into the string. See using strings as arguments below.

function (replacement)

  • A function that creates a new substring whose return value replaces the result of the first argument. Refer to specifying a function as an argument below.

The return value

  • A string that partially or completely matches a new string replaced by an alternate pattern.

describe

  • This method does not change the string from which it was called, but simply returns a new, replaced string.

  • When performing global search and replace, the regular expression must contain the G flag.

2. Regular expressions

MDN

We need to understand some basic points

  1. .Can matchAny characterSo:

‘xx.’ can match ‘XXC’, ‘xxO’, ‘x! ‘etc.

  1. Special symbols need \ escape matching

  2. \s can match a space (as well as whitespace such as Tab), so \s+ means that there is at least one space, such as “,”

  3. If the character is given directly, it is an exact match. Use \d to match a number, \w to match a letter or number

  4. To match variable-length characters, in a regular expression,

  • with*saidAny character (including 0)
  • with+saidAt least one character
  • with?saidA string of 0 or 1 characters
  • with{n}saidN characters
  • with{n,m}saidn-mA character
  1. Finally, in particular, re matching defaults toGreed match, that is,Matches as many characters as possible.

Simple handwriting implementation

implementation

  1. Write test cases first
let name = 'More'
let sex = 'man'
let extra = '!!!!!! '
let data = {name, sex, extra}

// A template string of type ${}
let strWith$ = '${extra} Hello ${name}, you are a ${sex}'
console.log(render1(strWith$)(data))
/ /!!!!!! Hello More, you are a man

// Template string of type {{}}
let strWithDoubleParentheses = '{{extra}} Hello {{name}}, you are a {{sex}}'
console.log(render2(strWithDoubleParentheses, data))
/ /!!!!!! Hello More, you are a man
Copy the code
  1. Implement master logic
function render1(template) {
    return function(data) {
        return template.replace(/ \ $\ {(. *?) \}/g.(match, key) = >data[key]); }}// There is little change except for the re
function render2(template, data) {
  return template.replace(/\{\{(\w+)\}\}/g.(match, key) = > data[key]);
}
Copy the code

Two of these re’s are explained briefly

  1. / \ $\ {(. *?) \}/g
// The following g means global, as mentioned aboveWe can do it in stages1. //g
2. /\$\{\}/g     // It is the special symbol that needs' \ 'escape matching
3./ \ $\ {(. *?) \}/g// Matches the intermediate variable length variable name string (.*?). (\ w +) will do
Copy the code
  1. /\{\{(\w+)\}\}/g The effect is the same
`\w`Can match a letter or number`\w+`It can match at least one letter or number, and it can match variable names in the middleCopy the code

Usually simple re can be slightly recorded, get twice the result with half the effort, you re can write not 6, but at least to be able to read, know the principle, and can find the right tool to verify you find available re.

In addition to regular expression principles, I will write a separate article in the core Concepts series.

In addition, we recommend another series of articles, very simple, on the front of the advanced students are very effective, wall crack recommended!! Core concepts and algorithms disassembly series remember to like ha

If you want to brush the questions with me, you can add me on wechat. Click here to make a friend Or search my wechat account, infinity_9368. You can chat with me and add my secret code “Tianwang Gaidihu”. Verify the message please send me Presious tower shock the rever Monster, I see it through, after adding I will do my best to help you, but pay attention to the way of asking questions, it is suggested to read this article: the wisdom of asking questions

reference

  • Developer.mozilla.org/zh-CN/docs/…
  • Developer.mozilla.org/zh-CN/docs/…