npm 包 ngx-brazilian-helpers 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

ngx-brazilian-helpers 是一个基于 Angular 框架的 npm 包，主要用于帮助开发者轻松处理巴西特有的数据格式和计算，在前端应用程序中使用非常普遍。

本文将针对这个 npm 包进行详细的介绍和使用教程。

安装

在讲述如何使用 ngx-brazilian-helpers 之前，我们先来安装它。

首先要确保安装了 Angular CLI 工具，然后在项目根目录下，输入以下命令：

npm install ngx-brazilian-helpers --save

安装成功后，若您使用的是 Angular 6 以下版本，需要在项目的 src/polyfills.ts 中添加以下代码以支持 es6 中对 object 和 array 的部分功能：

import 'core-js/es6/object';
import 'core-js/es6/array';

使用

安装完成后，就能够在您的项目中使用 ngx-brazilian-helpers 了。

在您需要使用这个 npm 包的组件中，首先要引入它：

import { CurrencyHelper, CpfCnpjHelper, PhoneHelper } from 'ngx-brazilian-helpers';

这个 npm 包主要包含以下三个常用的帮助函数：CurrencyHelper、CpfCnpjHelper 和 PhoneHelper。

CurrencyHelper

这个帮助函数主要用于处理货币计算和货币显示格式，支持以下几种操作：

转换数字到货币字符串格式。例如：

const number = 1234.56;
const currency = CurrencyHelper.currency(number, ',', '.');
console.log(currency); // '1.234,56'

第二个参数为小数点分隔符，第三个为千位分隔符。

将货币字符串转换为数字。例如：

const currency = '1.234,56';
const number = CurrencyHelper.number(currency, ',', '.');
console.log(number); // 1234.56

在两个货币数字之间进行四则运算。例如：

const value1 = 1000;
const value2 = 500;
const add = CurrencyHelper.add(value1, value2);
console.log(add); // 1500

支持的四则运算有加法、减法、乘法和除法，分别对应 add、subtract、multiply 和 divide 函数。

CpfCnpjHelper

这个帮助函数主要用于处理巴西人的身份证号码和企业代码（CNPJ），支持以下几种操作：

判断给定的字符串是否为有效的身份证号或企业代码。例如：

const cpf = '012.345.678-90';
const validCpf = CpfCnpjHelper.validateCpf(cpf);
console.log(validCpf); // true

const cnpj = '61.383.654/0001-70';
const validCnpj = CpfCnpjHelper.validateCnpj(cnpj);
console.log(validCnpj); // true

清除给定字符串中的非数字字符，返回纯数字格式的字符串。例如：

const cpf = '012.345.678-90';
const clearCpf = CpfCnpjHelper.clear(cpf);
console.log(clearCpf); // '01234567890'

const cnpj = '61.383.654/0001-70';
const clearCnpj = CpfCnpjHelper.clear(cnpj);
console.log(clearCnpj); // '61383654000170'

返回一个切分过的数组，该数组包含身份证号或企业代码的各个组成部分，例如：

const cnpj = '61.383.654/0001-70';
const parts = CpfCnpjHelper.split(cnpj);
console.log(parts); // ['61', '383', '654', '0001', '70']

将切分过的数组组合成一个格式化后的字符串，例如：

const parts = ['61', '383', '654', '0001', '70'];
const formattedCnpj = CpfCnpjHelper.format(parts);
console.log(formattedCnpj); // '61.383.654/0001-70'

PhoneHelper

这个帮助函数主要用于处理巴西人的电话号码和手机号码，支持以下几种操作：

清除给定字符串中的非数字字符，返回纯数字格式的字符串。例如：

const phone = '(11) 1234-5678';
const clearPhone = PhoneHelper.clear(phone);
console.log(clearPhone); // '1112345678'

const mobile = '(11) 91234-5678';
const clearMobile = PhoneHelper.clear(mobile);
console.log(clearMobile); // '11912345678'

将手机号码拆分为国际代码和手机号码部分。例如：

const mobile = '55 11 91234-5678';
const mobileParts = PhoneHelper.split(mobile);
console.log(mobileParts); // { international: '55', number: '11912345678' }

示例

最后，我们给出一个使用 ngx-brazilian-helpers 的示例。假设我们有一个订单金额的输入框，我们需要在用户输入时将其数字格式化为货币的显示格式。

假设这个输入框的模板如下：

<input [(ngModel)]="amount">

我们可以在它的组件中添加以下代码来监听输入事件，然后用 CurrencyHelper.currency 函数将数字格式化为货币格式：

-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------------------

------------
  --------- -----------------
  --------- ------- -----------------------
--
------ ----- ------------------ -
  ------ - --

  -------------------------- ------ -
    ----- ------------ - ------------ -- -----------------
    ----- ---------- - --------------------
    ----- -------------- - ----------------------------------- ---- -----
    ------------------ - ---------------
  -
-

这样，当用户在输入框中输入数字时，它就会自动被格式化为货币的显示格式。

结论

本文针对 ngx-brazilian-helpers 进行了详细的介绍和使用教程，包括它的安装、使用方法和示例。这个 npm 包主要用于处理巴西特有的数据格式和计算，在开发巴西本土应用程序时非常有帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005664d81e8991b448e26f5