技术派中长整型精度丢失的几种解决方案

长整型精度丢失问题修复方案

javascript以64位双精度浮点数存储所有Number类型值，即计算机最多存储64位二进制数。 但是需要注意的是Number包含了我们常说的整形、浮点型，相比较于整形而言，会有一位存储小数点的偏移位，由于存储二进制时小数点的偏移量最大为52位，计算机存储的为二进制，而能存储的二进制为62位，超出就会有舍入操作，因此 JS 中能精准表示的最大整数是 Math.pow(2, 53)，十进制即9007199254740992 大于9007199254740992的可能会丢失精度

因此对于java后端返回的一个大整数，如基于前面说到的雪花算法生成的id，前端js接收处理时，就可能出现精度问题

接下来我们以技术派中选择的Thymeleaf模板渲染引擎，来介绍一下对于大整数的精度丢失问题的几种解决方案

1. 场景复现

模板网页如下

    
    
    
    
    
    




    
hello world!
    

    
hu id
    

    
self id
    

    直接输出，模拟精度丢失
    

    

    

        huTool:
        
hu id
    
    

    

        自定义:
        
self id
    

我们直接借助前面实现的Snowflake来生成长整数，写一个对应的接口

@Controller
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class);
    }

    @Autowired
    private HuToolSnowFlakeProducer huToolSnowFlakeProducer;
    @Autowired
    private SelfSnowflakeProducer selfSnowflakeProducer;

    @ResponseBody
    @GetMapping(path = "id2")
    public IdVo id2() {
        Long hu = huToolSnowFlakeProducer.nextId();
        Long se = selfSnowflakeProducer.nextId();
        return new IdVo(hu, se);
    }

    @GetMapping("show")
    public String idShow(Model model) {
        Map map = new HashMap<>();
        map.put("hu", huToolSnowFlakeProducer.nextId());
        map.put("se", selfSnowflakeProducer.nextId());
        model.addAllAttributes(map);
        System.out.println("show: " + map);
        return "show";
    }

    @Data
    public static class IdVo {
        private Long hu;
        private Long se;
        private String h;
        private String s;

        public IdVo(Long hu, Long se) {
            this.hu = hu;
            this.se = se;
            this.h = String.valueOf(hu);
            this.s = String.valueOf(se);
        }
    }
}

直接访问，表现如下

从截图可以看出，再html标签中，直接使用${hu}获取长整型时，显示正常；

但是js中，获取的长整型，则出现了精度丢失问题

如控制台中打印的 console.log("hu = ", hu); 最后的几位变成了0，与实际不符

2. long转String，解决长整型问题

对于长整型导致的精度问题，最容易想到也是最推荐的解决方案，即对于long类型的参数，改为String方式进行返回，让前端以String的方式进行处理，从而解决精度丢失问题

方案1：修改后端的返回，将长整形改String

如将上面的流程如下修改:

@GetMapping("show")
public String idShow(Model model) {
    Map map = new HashMap<>();
    map.put("hu", String.valueOf(huToolSnowFlakeProducer.nextId()));
    map.put("se", selfSnowflakeProducer.nextId() + "");
    model.addAllAttributes(map);
    System.out.println("show: " + map);
    return "show";
}

方案2：前端js使用String方式接收长整形

具体的效果就不再演示，有兴趣的小伙伴可以自己体验一下；这种方式虽然简单有效，但是对现有的项目改造还是挺大的，且很容易有遗漏；自然的，我们就会思考一下，是否有统一的处理方式来解决这种问题

3. 修改序...