有没有一种简单的方法来获取对一行 JS 代码的建议？答案

【问题标题】：Is there a simple way to get suggestions for a line of JS code?有没有一种简单的方法来获取对一行 JS 代码的建议？
【发布时间】：2019-02-07 03:32:50
【问题描述】：

如果我有一串有效 JS 代码，例如"'foobar'.charCodeAt(0)"，我可以评估它——这显然很简单。
JS 代码中的eval()（或new Function()）或CLI 中的node -e（或d8 -e）解决了这个任务。

但我需要为 incomplete 行 JS 代码获取潜在建议。
例如，如果我有一个字符串"'foobar'.cha"，我想要一个类似数组['charAt', 'charCodeAt, 'matchAll']（或["'foobar'.charAt", "'foobar'.charCodeAt", "'foobar'.matchAll"]）的东西。

是否有可靠且开箱即用的解决方案？这对我来说没什么大不了的，我不想花太多时间在上面。

谢谢。

【问题讨论】：

您是否在编辑器中寻找自动完成的建议？
你到底想达到什么目的？
@undefined 你可能会认为我编写了自己的微型 JS 编辑器。 %)
@shau-kote 这听起来很有趣！祝你好运。你一定很年轻或有野心:)
@undefined 谢谢。我不是那么年轻，但努力保持雄心勃勃。 ;)

标签： javascript code-editor

【解决方案1】：

它可能会比这更复杂，但是一旦你能够正确解析代码，你可以通过执行以下操作获得一组原型函数：Object.getOwnPropertyNames(String.prototype) - 或任何你需要的原型，只需使用 @987654323 @ 在这个例子中。

function getFuncs(type) {
  if (type === 'string') {
    var funcs = Object.getOwnPropertyNames(String.prototype).reduce((accum, el) => {
      accum.push(el);
      return accum;
    }, []);
    //console.log(funcs);
    return funcs;
  }
  console.log(`${type} not implemented yet..`);
  return;
}

var divEl = document.querySelector('#divEl');
document.querySelector('#inputEl').addEventListener('keyup', e => {
  divEl.innerHTML = '<ul>';
  var funcs = getFuncs(typeof e.target.value);
  var filtered = funcs.filter(fnName => {
    return fnName.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1;
  });
  if (e.target.value.trim() != '') {
    filtered.forEach(fnName => divEl.innerHTML += `<li>${fnName}</li>`);
  }

  divEl.innerHTML += '</ul>';
});

"foobar.<input id="inputEl" type="text" />"
<br />
<div id="divEl"></div>

【讨论】：

是的，您已经成功地为一个在我脑海中旋转但模糊不清的想法编写了一个最小可行的演示。但这种方法看起来并不简单或开箱即用。首先，它需要一个功能齐全的 JS 解析器（好吧，我认为它有一些库）。其次，即使是全能的代码解析器也无法确定完整代码部分的类型——对于 "(1 + 1).to" 甚至 "(() => 'foobar')().cha" 之类的情况，它可能需要部分执行（尽管后者有点过高）。
我认为如果你真的想要的话，如果你使用像 Esprima 这样的好的解析器，它就可以实现：esprima.org。解析器将创建一个包含Nodes 的语法树。每个Node 都包含元数据，包括type，您可能会在程序中使用这些元数据。
感谢您的提示。希望我可以使用它（它看起来不是很简单的解决方案）。