如何从 JavaScript 中的 < > 括号中提取动态变量

在 JavaScript 中，我们经常遇到使用 < > 括号包含动态变量的情况，比如 React 中的 JSX 语法或 Vue 中的模板语法。在某些情况下，我们需要提取这些动态变量进行处理，那么如何做到呢？

使用正则表达式提取变量

可以使用正则表达式来匹配 < > 括号中的内容，并提取其中的变量。以下是一个简单的示例：

const str = '<div>{name}</div>'
const matches = str.match(/<.*?{(.+?)}.{0,2}>/)
const variable = matches[1]
console.log(variable) // 输出 name

这里使用了 match 方法来匹配字符串中符合要求的部分，并返回一个数组。数组中的第一个元素是匹配到的字符串，从第二个元素开始是分组捕获的内容。在正则表达式中，使用 () 来表示一个分组。

需要注意的是，这里使用了非贪婪模式的 .*? 来匹配 < > 之间的任何字符。同时，也需要将 { 和 } 转义，因为它们是正则表达式的特殊字符。

使用 AST 解析语法树

在某些情况下，字符串提取变量可能会变得非常复杂，甚至无法用正则表达式来处理。这时可以考虑使用 AST（Abstract Syntax Tree，抽象语法树）来解析语法树，获取动态变量。

以下是一个示例，使用 babylon 和 babel-traverse 来解析 JSX 语法树：

const babylon = require('babylon')
const traverse = require('babel-traverse').default

const sourceCode = '<div>{name}</div>'
const ast = babylon.parse(sourceCode, {
  plugins: ['jsx']
})

let variable
traverse(ast, {
  JSXExpressionContainer(path) {
    if (path.node.expression.type === 'Identifier') {
      variable = path.node.expression.name
    }
  }
})

console.log(variable) // 输出 name

这里使用 babylon 来将源代码解析成 AST，然后使用 babel-traverse 遍历 AST。在遍历过程中，我们可以根据特定的节点类型来处理。可以使用 JSXExpressionContainer 来处理包含动态变量的部分，然后判断表达式的类型是否为 Identifier，如果是，则表示这是一个变量名，可以获取变量名并进行处理。

结论

以上是两种从 JavaScript 中的 < > 括号中提取动态变量的方法，可以根据实际情况选择合适的方法来处理。需要注意的是，这种方法需要谨慎使用，因为有些情况下动态变量的类型可能是复杂的，不光是简单的变量名。