AutoDecimal：轻松解决 JavaScript 运算精度问题之跳过转换

AutoDecimal 解放你的手与脑

书接上篇，AutoDecimal：轻松解决 JavaScript 运算精度问题，目前 AutoDecimal 已经发布，有需要的同学可以下载使用了。

想深入了解的同学可以查看直接文档传送门。

安装

首先安装 unplugin-auto-decimal 和其依赖，没有安装 decimal.js 的同学需要安装一下 decimal.js、decimal.js-light、big.js 其中任意一个，然后通过 package 指定使用哪个包即可。AutoDecimal 默认使用的是 decimal.js-light。

bash 复制代码

npm install unplugin-auto-decimal -D
npm install decimal.js-light -S

因为 unplugin-auto-decimal 基于 unplugin 构建，所以基本上 unplugin 支持的构建工具都可以使用。

以 vite 为例:

ts 复制代码

// vite.config.ts
import AutoDecimal from 'unplugin-auto-decimal/vite'
export default defineConfig({
    plugins: [
        AutoDecimal({
          /** options */
        })
    ]
})

这样就可以了。不但解决了计算精度的问题，同时也不需要额外的手动引入并使用 decimal.js了。是不是很简单？

有的同学可能就要问了，真的这么丝滑这么简单，一点配置或者额外的设置都不需要吗？

当然......是不可能的。

正题------跳过转换

嗯...每个月总有那么几天不想转换，那要怎么办？

1. 拼接空字符串

在计算表达式末尾拼接一个空字符串就可以跳过转换了。

ts 复制代码

// 配置完毕 AutoDecimal 后
const a = 0.1 + 0.2
console.log(a, 0.3)

// 想跳过的话末尾拼接空字符串就可以了
const b = 0.1 + 0.2 + ''
console.log(b, '0.30000000000000004')

2. 添加相应注释

为了解决每个月的那么几天，添加了相应的注释来解决对应的问题。

ad-ignore
file-ad-ignore
block-ad-ignore
next-ad-ignore

就上述的四种注释了，也没有多么复杂对吧？来，先挑简单的说。

ad-ignore

它的作用只有一个，那就是跳过 template 中的所有计算表达式。当你使用 vue template 方式开发时，如果在 template 中，包含了计算表达式，但是却不想转换，想原样输出。只需要在根 template 上添加这个 prop 即可。

html 复制代码

<!-- 所有 template 内的计算表达式都不转换，添加 ad-ignore -->
<!-- 像下面这样就可以了，template 会原样输出，不做任何处理 -->
<template ad-ignore>
   <div>{{ 0.1 + 0.2 }}</div>
   <div>{{ 0.1 + 0.2 }}</div>
   <div :prop="0.1 + 0.2">{{ 0.1 + 0.2 }}</div>
</template>

file-ad-ignore

它的作用也只有一个，就是跳过某个文件。在 js 或者 ts 的顶部添加 file-ad-ignore，那么整个文件都将跳过。

ts 复制代码

// file-ad-ignore
...
...

const a = 0.1 + 0.2
console.log(a, 0.30000000000000004)


const b = 0.1 + 0.2
console.log(b, 0.30000000000000004)

block-ad-ignore

它的作用，就是跳过下一个块的计算表达式。什么块呢？当然是 JavaScript 的块级作用域了。

在 JavaScript 中：

ts 复制代码

// block-ad-ignore
{
  const a = 0.1 + 0.2
  console.log(a, 0.30000000000000004)
  
  const b = 0.1 + 0.2
  console.log(b, 0.30000000000000004) 
}
const a = 0.1 + 0.2
console.log(a, 0.3)

// block-ad-ignore
function skipSum() {
  const a = 0.1 + 0.2
  console.log(a, 0.30000000000000004)
  
  const b = 0.1 + 0.2
  console.log(b, 0.30000000000000004)
}


function sum() {
  const a = 0.1 + 0.2
  console.log(a, 0.3)
  
  const b = 0.1 + 0.2
  console.log(b, 0.3)
}



// block-ad-ignore 下面的 b 将会跳过，不会转换
const b = 0.1 + 0.2
console.log(b, 0.30000000000000004)

在 vue template 中，block-ad-ignore的作用是跳过下一行所有计算表达式，是所有，包含子集：

html 复制代码

<template>
   <!-- block-ad-ignore -->
   <div :prop="0.1 + 0.2">{{ 0.1 + 0.2 }}</div>
   prop: 0.30000000000000004
   slot: 0.30000000000000004
   
   <!-- block-ad-ignore -->
   <div :prop="0.1 + 0.2">
     {{ 0.1 + 0.2 }}
     <import-component>{{ 0.1 + 0.2 }}</import-component>
   </div>
   上面所有的计算表达式都会跳过
</template>

在 jsx 中与 template 中一致:

jsx 复制代码

function render() {
  return (
    <>
      {/* block-ad-ignore */}
      <div>{0.1 + 0.2}</div>
      slot: 0.30000000000000004
      
      {/* block-ad-ignore */}
      <div prop={0.1 + 0.2}>
        {0.1 + 0.2}
      </div>
      prop: 0.30000000000000004
      slot: 0.30000000000000004
      
      {/* block-ad-ignore */}
      <div prop={0.1 + 0.2}>
        {0.1 + 0.2}
        <import-component>{0.1 + 0.2}</import-component>
      </div>
     上面所有的计算表达式都会跳过
    </>
  )
}

next-ad-ignore

它的作用，就是跳过下一行的计算表达式。

在 JavaScript 中：

ts 复制代码

const a = 0.1 + 0.2
console.log(a, 0.3)

// next-ad-ignore 下面的 b 将会跳过，不会转换
const b = 0.1 + 0.2
console.log(b, 0.30000000000000004)

在 vue template 中，next-ad-ignore的作用是跳过下一行 prop 中的计算表达式(只有 prop)，或者说跳过下一行标签中的计算表达式：

html 复制代码

<template>
   <!-- next-ad-ignore -->
   <div :prop="0.1 + 0.2">{{ 0.1 + 0.2 }}</div>
   prop: 0.30000000000000004
   slot: 0.3
   
   <div>
     <!-- next-ad-ignore -->
     {{0.1 + 0.2}}
     slot: 0.30000000000000004
   </div>
</template>

在 jsx 中，next-ad-ignore 稍微有些不同:

jsx 复制代码

function render() {
  const list = [0.1, 0.1, 0.1]
  return (
    <>
      {/* next-ad-ignore */}
      <div>{0.1 + 0.2}</div>
      slot: 0.30000000000000004
      
      <div>
        {/* next-ad-ignore */}
        {0.1 + 0.2}
        slot: 0.30000000000000004
      </div>
      
      
      <div>
        {/* 和 template 中的不同在这里 */}
        {/* 和 template 中的不同在这里 */}
        {/* 和 template 中的不同在这里 */}
        
        {/* next-ad-ignore */}
        第一个: {0.1 + 0.2} 第二个: {0.1 + 0.2}
        第一个: 0.30000000000000004 第二个: 0.3
        在 jsx 中，第一个 会跳过，而第二个不会跳过
        在 template 中，第一个和第二个都会跳过
      </div>
      {
        list.map(item => {
          /**
            * 这里需要注意一下，要使用 JavaScript 中的单行注释或者多行注释都可以
            * 这里需要注意一下，要使用 JavaScript 中的单行注释或者多行注释都可以
            * 这里需要注意一下，要使用 JavaScript 中的单行注释或者多行注释都可以
            * 
            * 不能使用 jsx 中的注释 {/*  */}
            * 也就是说，如果想跳过下面计算表达式的话
            * 应该使用 // next-ad-ignore
            * 而不是 {/* next-ad-ignore */}
            * 像这样也是可以的 next-ad-ignore
            */
          return <span>{item + 0.2}</span>
        })
      }
    </>
  )
}

以上就是 unplugin-auto-decimal如何跳过转换的内容了，喜欢的同学点个赞吧。