Vue.js Filters e a Programação Funcional

O Vue.js permite que você utilize Filters (ou filtros em português) nas templates HTML. Este recurso é usado normalmente para formatar campos, como por exemplo: Deixar Strings maiúsculas/minúsculas, formatar números, exibir datas, etc.

O Filter é inspirado em linguagens funcionais e com ele você pode fazer as chamadas de funções de uma maneira mais "bonita" e "legível".

Por exemplo, tradicionalmente você chama uma função dessa maneira:

double(5);

Utilizando Filters, a chamada dessa função fica assim:

5 | double;

Inicialmente pode parecer algo irrelevante, mas quando você tem várias funções encadeadas e escritas da maneira tradicional, a legibilidade do código pode ficar comprometida.

Para mais informações sobre os Filters, você pode consultar a documentação oficial do Vue.js, que inclusive está em português. Para acessá-la clique aqui.

Filters e Pipeline Operators: É a mesma coisa?

Esta funcionalidade por enquanto só funciona nas templates HTML do Vue.js, porém existe a intenção de tornar este recurso nativo no JavaScript. O nome técnico desta funcionalidade é Pipeline Operator e já existe uma proposta formal no TC39 para sua implementação.

Vale ressaltar que existem algumas diferenças entre a sintaxe dos Vue Filters e do Pipeline Operator proposto no TC39. Se você quer saber mais detalhes sobre os Pipeline Operators, recomendo que você veja esses links:

• TC39
• Developers Mozilla
• Using Pipeline Operator

Implementando um Filter para Formatar CPF e CNPJ

Recentemente fiz uma integração com um software que armazenava os CPF/CNPJ do cadastro de clientes em um campo Integer. Até aqui tudo certo, o problema surgia quando precisava exibir este campo, uma vez que os usuários tinham dificuldade de identificar quando era um CPF ou quando era um CNPJ.

Este cenário é perfeito para implementação de um Vue.js Filter, segue o código que utilizei para resolver este problema:

const DocumentPersonBrFilter = {
  install(Vue, options) {
    Vue.filter('DocumentPersonBr', (documentId, documentType) => {
      documentId = typeof documentId != 'string' ? documentId.toString() : documentId;
      if (documentType == 'J') {
        documentId = documentId.padStart(14, '0');
        documentId = documentId.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, '$1.$2.$3/$4-$5');
      } else {
        documentId = documentId.padStart(11, '0');
        documentId = documentId.replace(/^(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
      }
      return documentId;
    });
  },
};
Vue.use(DocumentPersonBrFilter);

Como você pode ver, o código é simples. O primeiro parâmetro do Filter se chama "documentId" e representa o CPF ou o CNPJ. O segundo parâmetro ("documentType") é um indicador se é pessoa física ("F") ou jurídica ("J").

Após uma consistência e conversão de tipagem, o "documentId" é completado com zeros à esquerda de acordo com o valor informado no "documentType". Em seguida, é realizado um "replace" usando uma expressão regular para formatar o "documentId" conforme necessário.

A chamada deste Filter fica dessa maneira:

<div>{{ 80890441901, 'F' | DocumentPersonBr }}</div>

Os Vue.js Filters já me ajudaram a resolver inúmeros problemas e por isso fazem parte do meu dia-a-dia. Se você gostou deixe seu comentário ou compartilhe este artigo.

Dúvidas ou sugestões é só entrar em contato. Abraço.