随着互联网飞速发展，人们越来越注重自己的健康饮食。对于前端开发工程师来说，能够自己使用前端技术帮助用户识别食品的基本信息也是一项非常有价值的能力。npm 包 nutrition-facts 就是一款可以用于识别食品营养成分的 npm 包，下面我们就来详细了解一下如何使用这个包。
安装
我们可以使用 npm 命令进行安装：
npm install nutrition-facts
使用
步骤一：导入模块
在需要识别食品营养成分的文件中，我们需要先导入模块：
const nf = require('nutrition-facts');步骤二：获取食品营养成分
接下来我们需要获取食品的营养成分。使用 nutrition-facts 这个 npm 包，我们只需要在调用 nf.search(query) 方法时传入正确的参数即可返回对应的信息，其中 query 为需要搜索的食品名字，代码如下：
const query = 'apple';
nf.search(query).then(results => {
console.log(results);
});在控制台会输出如下信息：
-- -------------------- ---- -------
-
-
---------- ---------
----------- -----
------------ --
------------- ------- --------
--------------------- ----
------------ ------
------------- -----
----------------- -----
--------------- --
---------- -----
---------------------- ------
----------------- ----
---------- ------
----------- -----
------------- -------
----- ------
--------------- -
-
-------- ----
------ --------
--
-
-------- ----
------ -------
--
-
-------- ----
------ --------
--
-
-------- ----
------ -------
--
-
-------- ----
------ ------
--
-
-------- ----
------ -------------------
--
-
-------- ----
------ -------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------------------
--
-
-------- ----
------ -----
--
-
-------- ----
------ ----
--
-
-------- ----
------ ----
--
-
-------- ----
------ -
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ --------------------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ -------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ -------
--
-
-------- ----
------ -
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ -----
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ --------------------
--
-
-------- ----
------ --------------------
--
-
-------- ----
------ -------------------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ---------------------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ -----
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ -------
--
-
-------- ----
------ -----
--
-
-------- ----
------ -------
--
-
-------- ----
------ ------
--
-
-------- ----
------ -----
--
-
-------- ----
------ ------
--
-
-------- ----
------ --------------------
--
-
-------- ----
------ ----
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
--
-
-------- ----
------ -------------------
--
-
-------- ----
------ ------------------
--
-
-------- ----
------ ------
--
-
-------- ----
------ ------
-
-
-
-步骤三：利用返回信息
返回的信息包含了很多食品的具体营养成分，以苹果为例，我们可以依照属性值的下标获取到具体的营养成分数据，如下：
const calories = results[0].full_nutrients[1].value; const carbs = results[0].full_nutrients[3].value; const protein = results[0].full_nutrients[5].value; const sugar = results[0].full_nutrients[6].value;
那么现在我们就可以将这些信息显示在网页上，甚至按照我们自己的需求进行个性化的处理。
<div>
<p>Calories: ${calories} cal</p>
<p>Carbohydrate: ${carbs} g</p>
<p>Protein: ${protein} g</p>
<p>Sugar: ${sugar} g</p>
</div>总结
nutrition-facts 这款 npm 包可以帮助我们快速识别食品的营养成分，通过与前端技术的结合，可以让我们更好的满足用户自身的需求，达到更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552bb81e8991b448d022a