Fakerjs 入门指南

做前端开发,你一定遇到过这样的场景:页面写好了,后端接口还没就绪。总不能对着空白页干瞪眼,于是你在代码里硬塞了几个「张三」「test123」「这是一段测试文本」。数据是有了,可页面看起来像个半成品,想截图给产品看都拿不出手。faker.js(现在官方叫 @faker-js/faker)就是为解决这个痛点而生的工具,它能在几秒钟内给你造出一整套看起来跟真实业务数据一模一样的假数据。

什么是 faker.js

faker.js 是一个用于随机生成仿真数据的 JavaScript 库。人名、邮箱、地址、手机号、日期、商品名,甚至头像链接和占位文本,它都能通过一行 API 生成。你不需要求后端开接口,也不需要手写 JSON,一个循环就能填满整个列表页。

这个库它最早由 Marak Squires 创建,曾是 JS 生态里下载量最高的工具库之一。2022 年初,Marak 因为不满大公司白嫖开源劳动,一怒之下删除了代码,「faker.js 删库」事件一度刷屏开发者社区。好在社区反应迅速,一批维护者把项目 fork 出来,成立了 faker-js 组织,以 @faker-js/faker 的名义继续开发。所以今天的 faker.js 是一个有正式团队维护、MIT 协议授权的社区项目,官网是 fakerjs.dev。写这篇文章时,它的最新版本已经迭代到 10.x,API 相当稳定,可以放心用在新项目里。

安装和第一次使用

这个库只在开发和测试阶段用,建议放进 devDependencies:

npm install @faker-js/faker --save-dev

注意包名是 @faker-js/faker,不是 faker。npm 上那个古老的 faker 包早已无人维护,装错包是新手最常踩的第一个坑。

用起来非常简单:

import { faker } from '@faker-js/faker';

const user = {
  id: faker.string.uuid(),
  name: faker.person.fullName(),
  email: faker.internet.email(),
  avatar: faker.image.avatar(),
  createdAt: faker.date.recent(),
};

console.log(user);
// { name: 'Norma Fisher', email: 'Norma_Fisher@hotmail.com', ... }

多跑几次,每次输出的数据都不一样,而且格式像模像样:名字是真实存在的英文名组合,邮箱符合标准格式,日期是最近的时间点。这就是它和随手 hardcode 的区别——数据有「真实感」。

‼️ 如果你希望在线体验 fakerjs 的功能,可以参考 FakeBuilder 在线工具,该工具基于 fakerjs 提供了各种 Fake 数据生成器。

常用模块盘点

faker.js 把 API 按模块组织,覆盖面广得超出想象。挑几个最高频的说:

person,和人有关的一切。faker.person.fullName() 生成姓名,faker.person.jobTitle() 生成职位,faker.person.bio() 生成个人简介,做用户中心页面时几乎全靠它。

internet,网络数据大户。邮箱、URL、密码、IP 地址一应俱全,faker.internet.email()faker.internet.url()faker.internet.ipv4() 都是常客。

location,地址相关。faker.location.city() 生成城市,faker.location.streetAddress() 生成街道地址,甚至连经纬度都能造出来,做地图 demo 时很好用。

commerce,电商三件套。faker.commerce.productName() 出商品名,faker.commerce.price() 出价格,faker.commerce.productDescription() 出商品描述。写购物网站的 demo,这三个调用就能撑起一整个页面。

date,时间类数据。faker.date.past() 取过去某个时间,faker.date.between() 在指定区间里挑日期,faker.date.recent() 特别适合营造「刚刚发布」的效果。

lorem,占位文本生成器。faker.lorem.paragraph() 来一段,faker.lorem.sentences() 来几句,排版页面再也不用去网上复制文章了。

除此之外还有 company(公司名)、phone(电话)、finance(交易流水)、vehicle(车牌)、music(歌曲名)、animal(动物名)等等。完整的一百多个 API,官网的 API 列表里都能查到,值得花十分钟扫一遍,用的时候心里有数。

生成中文数据

默认情况下 faker.js 使用英文语料,生成的名字、地址都是英文的。想要中文数据,直接引入中文语料的实例:

import { fakerZH_CN as faker } from '@faker-js/faker';

faker.person.fullName();        // 类似「王小明」的中文名
faker.location.streetAddress(); // 国内的街道地址
faker.phone.number();           // 符合国内格式的手机号
只需要换个导入,其他用法完全不变,生成的数据立刻本土化。做面向国内用户的页面或测试用例时,记得一开始就用 fakerZH_CN

几个进阶技巧

用种子锁定随机结果。 faker.js 默认每次运行都生成新数据,但有些场景需要数据稳定,比如写 Storybook 快照、做视觉回归测试。这时可以用种子:

faker.seed(2026);
const name = faker.person.fullName(); // 相同种子 + 相同调用顺序 = 相同结果

设定种子后,只要 API 调用的顺序不变,每次跑出来的数据都一模一样,调试和对比截图省心很多。

批量造列表数据。 真实页面展示的往往是列表,helpers 模块专门干这个活:

const users = faker.helpers.multiple(
  () => ({
    name: faker.person.fullName(),
    email: faker.internet.email(),
  }),
  { count: 20 }
);

一行配置,二十个假用户就有了,直接喂给列表组件。想从已有数组里随机取一项,用 faker.helpers.arrayElement(users)

和测试框架配合。 写 vitest 或 jest 测试时,与其手写一堆 fixture,不如让 faker 现造。随机数据覆盖的边界情况比硬编码的「测试数据」多得多,还不用维护。跑 Playwright 端到端测试时,用 faker 随机生成注册用的用户名和邮箱,也能避免每次跑测试都撞上重复账号。

使用时要注意的坑

faker.js 再好用,也只是开发阶段的工具,有几条边界要守住。

首先,生成的数据不能进生产数据库。它看着真实,但本质是随机拼装的,不对应任何真实的人和业务,灌进线上就是脏数据。

其次,不要把它打进生产环境的前端代码里。这个库体积不小,开发环境无所谓,一旦跟着 bundle 上线,用户会白白下载一大坨没用的代码。坚持放在 devDependencies,只在脚本、demo 和测试里用。

再次,部分生成图片的 API(比如 faker.image.avatar())返回的是外部占位图服务的链接,离线或内网环境下可能加载不出来,演示前最好检查一下,必要时换成本地图片。

最后提一下版本差异。网上不少老教程里写的 faker.name.findName()faker.address.city() 是 v7 时代的旧 API,v8 之后统一改成了 faker.person.fullName()faker.location.city() 这类命名。复制代码报 undefined 的时候,先确认教程对应的版本。

常见问题

  • faker 和 @faker-js/faker 到底什么关系?
    faker 是原包名,2022 年被原作者废弃;@faker-js/faker 是社区接管后的正式继承者,也是现在唯一在维护的版本,参考官网安装步骤即可。
  • 能在浏览器里用吗?
    可以,Node.js 和浏览器都能跑,平时在浏览器控制台临时造点数据调试也很方便,只是别在生产页面里依赖它。
  • 为什么每次生成的数据都一样?
    多半是哪里调用过 faker.seed()。只要不设置种子,结果每次都会不同。
  • 能生成身份证号这类特定格式的数据吗?
    没有现成的身份证 API,但可以用 faker.string.numeric() 按规则拼接,再补一段校验位逻辑;类似的需求基本都能用 string 和 helpers 两个模块组合出来。

提示:如果希望生成 Fake 身份证号码,请参考本站工具:中国大陆身份证号码生成

写在最后

faker.js 属于那种「不起眼但真的好用」的工具。它只解决一个很具体的问题——低成本造出足够真实的假数据,但解决得很彻底:模块丰富、支持多语言、可控随机、和测试框架无缝配合。用过一段时间你会发现,手写假数据这个动作基本从你的工作流里消失了。

如果你的项目正好处于「前端先行、接口未定」的阶段,不妨现在就装上 @faker-js/faker 试试。完整的 API 文档请参考 fakerjs 官方网站(fakerjs.dev),花半天就能把常用 API 摸熟,之后的每一次联调都会轻松不少。

 

分享
下一篇 无更多文章