尧图网站建设 
NocoBase 数值格式化完整指南千分位、小数精度、单位换算与科学记数法配置详解【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase本文是 NocoBase 字段设置Field Settings系列技术指南之一围绕「数值格式化」功能展开它作用于数值类型字段含公式字段的阅读状态readPretty提供千分位分隔符、小数位精度、单位换算乘/除、前后缀与科学记数法等配置能力。读完本文你将掌握在 NocoBase 界面搭建器中为金额、数量等数值字段配置统一显示格式的完整操作方法并理解其底层实现原理对应源码见 ReadPretty.tsx 与 SchemaSettingsNumberFormat.tsx。介绍数值格式化是指对阅读状态下的数值类型字段包括公式字段进行视觉上的美化和规范化处理包括千分位分隔符、小数位数精度、单位换算、科学记数法等设置。通过配置数值格式化可以满足不同地区和行业的数值表达习惯。该功能在 NocoBase 中由数字输入框组件InputNumber的只读展示Read Pretty能力承载。当字段处于阅读状态时原始数值并不会被直接原样输出而是经过「单位换算 → 精度换算 → 分隔符换算 →可选科学记数法」这条流水线处理后渲染其核心入口为formatNumber函数见 ReadPretty.tsx。使用说明数值格式化支持以下能力简单的单位换算乘除在原始数值基础上进行乘法或除法运算例如将「分」换算为「元」、将「克」换算为「千克」千分位分隔符按三位一组插入千分位符号并提供多种地区的分隔符习惯前后缀为格式化后的数值附加前缀如货币符号或后缀如单位元精确度控制小数点后保留的位数科学记数法将大数或极小数值以科学计数形式展示指数以上标呈现。典型示例订单金额格式化对订单金额进行格式化包括添加货币符号人民币符号、千分位分隔符如逗号或点号、小数精度等使金额清晰易读。例如原始值1234567.89配置前缀、分隔符0,0.00、精度0.01后阅读状态将显示为1,234,567.89。典型示例科学记数法当数值极大如11111111111时可将显示格式切换为科学记数法阅读状态将渲染为1.11×10¹⁰形式指数部分以上标呈现便于在表格列宽有限时展示超大数值。配置入口数值格式化的配置入口位于字段的「字段设置Field Settings」弹层中操作路径为在界面搭建器中选中数值类型字段或公式字段打开「字段设置」找到「格式Format」菜单项并点击弹出格式化配置弹窗。该配置项由 SchemaSettingsNumberFormat 组件实现。配置结果会以x-component-props的形式写回字段的 schema 中并通过dn.emit(patch, { schema })触发 schema 补丁最终同步到字段的只读展示组件上。配置项详解格式化配置弹窗共包含六个配置项下表汇总了各项的名称、含义与可选值配置项含义可选值 / 默认值样式Style显示格式风格normal普通默认、scientifix科学记数法单位换算Unit conversion乘/除换算的倍数数值型前置下拉框选择运算符*乘以或/除以默认*分隔符Separator千分位与小数分隔符样式0,0.00默认、0.0,00、0 0,00、0.00无千分位精确度Precision小数点后保留位数从1到0.00000001共 9 档对应 08 位小数默认继承字段精度前缀Prefix数值前附加文本任意字符串如、$后缀Suffix数值后附加文本任意字符串如元、kg上述枚举与默认值均可在 SchemaSettingsNumberFormat.tsx 的 schema 定义中查到。样式Style样式决定数值的整体展示形态只有两个选项Normal普通按常规十进制方式显示为默认值Scientifix notation科学记数法以科学记数法显示。底层实现位于 scientificNotation 函数它基于d3-format的format(\.${decimalPlaces}e)生成尾数与指数并把指数统一渲染为×10…上标形式正指数省略号负指数保留-号。例如11111111111在精度0.01下会显示为1.11×10¹⁰。单位换算Unit conversion单位换算允许在原始数值基础上进行乘法或除法运算适用于金额单位换算如分→元除以 100、重量单位换算如克→千克除以 1000等场景。配置项由两部分组成运算符下拉框Multiply by乘以默认或Divide by除以对应源码中的unitConversionType属性取值为*或/倍数输入框乘除的系数对应unitConversion属性。底层实现为 formatUnitConversion 函数当倍数为 0 且运算符为除法时会输出错误日志并返回null避免除零运算结果会经过math.round(result, 9)四舍五入到 9 位小数避免浮点误差累积。仓库内置的示例 unit-conversion.tsx 展示了两种配置unitConversion: 10默认乘以 10与unitConversion: 10, unitConversionType: /除以 10原始值100分别显示为1000与10。分隔符Separator分隔符用于控制千分位与小数点的显示符号共四种预设适应不同国家和地区的书写习惯配置值千分位小数位示例数值 1234567.890,0.00默认,.1,234,567.890.0,00.,1.234.567,890 0,00空格.1 234 567.890.00无.1234567.89这些预设与源码中 separators 常量一一对应。在 formatNumberWithSeparator 中小于等于Number.MAX_SAFE_INTEGER的数值通过toLocaleString(en-US)生成带千分位的字符串再按预设将占位符替换为目标符号超过安全整数范围的超大数值则走 formatBigNumberWithSeparator 分支使用bignumber.js与正则\B(?(\d{3})(?!\d))完成整数部分的三位分组保证大数场景下不出现精度丢失。仓库演示 separator.tsx 以1234567.89为例同时展示了默认样式、0,0.00、0.0,00、0 0,00四种分隔符的渲染差异对应单元测试见 input-number.test.tsx。精确度Precision精确度控制小数点后保留的位数提供从1到0.00000001共 9 个档位分别对应 08 位小数配置值保留小数位示例数值 110 位10.11 位1.00.012 位1.000.0013 位1.0000.00014 位1.00000.000015 位1.000000.0000016 位1.0000000.00000017 位1.00000000.000000018 位1.00000000该配置对应step属性默认值取字段本身的精度设置见 SchemaSettingsNumberFormat.tsx 中step || prescition || 1的取值逻辑。在渲染流水线中精度换算通过toFixedByStep完成并作为小数位位数传入后续的分隔符格式化逻辑。前缀Prefix与后缀Suffix前缀与后缀为纯文本附加项渲染时分别显示在数值的左右两侧由addonBefore与addonAfter两个属性承载。典型用法包括前缀货币符号如、$、€后缀计量单位或币种如元、kg、USD。在 ReadPretty.tsx 的渲染中格式化后的数值字符串通过dangerouslySetInnerHTML注入以支持科学记数法的上标 HTML前后缀则作为普通 React 节点包裹在两侧因此前后缀本身不会被再次格式化。底层渲染流水线综合源码可以梳理出阅读状态数值渲染的完整调用链入口formatNumber(props)ReadPretty.tsx先校验值是否有效isValid无效则返回null调用formatUnitConversion(value, unitConversionType, unitConversion)完成单位换算乘/除结果四舍五入至 9 位小数调用toFixedByStep(unitData, step)完成精度换算调用formatNumberWithSeparator(...)完成分隔符换算含大数安全分支若formatStyle scientifix则改用scientificNotation(...)输出科学记数法。该流水线完整实现了文档开头所述的五类能力单位换算、千分位分隔符、前后缀、精确度、科学记数法。ReadPretty组件通过useMemo对上述结果做记忆化仅在step、formatStyle、value、unitConversion、unitConversionType、separator任一发生变化时重新计算。与输入组件的整体关系数值格式化是InputNumber组件「只读展示」能力的组成部分。在编辑状态下该组件基于 ant-design 的 InputNumberinterface InputNumberReadPrettyProps { formatStyle?: normal | scientifix; unitConversion?: number; /** * default * */ unitConversionType?: * | /; /** * default 0.00 */ separator?: 0,0.00 | 0.0,00 | 0 0,00 | 0.00; step?: number; value?: any; addonBefore?: React.ReactNode; addonAfter?: React.ReactNode; }仓库中的演示代码 format-style.tsx 展示了通过 schema 声明式配置formatStyle: scientifix使大数11111111111以科学记数法展示的完整用法对应科学记数法的单元测试见 input-number.test.tsx。开发者若要在自定义 schema 中直接使用该能力同样只需在x-component-props中声明上述属性即可与界面搭建器中的可视化配置结果完全等价。小结数值格式化是 NocoBase 字段设置中面向「阅读状态」的展示层能力通过样式、单位换算、分隔符、精确度、前后缀六个配置项的灵活组合可覆盖金额、数量、比例、大数等绝大多数业务展示需求。其配置结果以x-component-props持久化到字段 schema底层由formatNumber流水线统一执行既有可视化配置的易用性又有源码级的高精度保证大数走bignumber.js分支、单位换算结果四舍五入至 9 位小数、科学记数法上标渲染是搭建报表、表单与详情页时不可或缺的基础能力。【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 NocoBase 数值格式化完整指南：千分位、小数精度、单位换算与科学记数法配置详解
NocoBase 数值格式化完整指南千分位、小数精度、单位换算与科学记数法配置详解【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase本文是 NocoBase 字段设置Field Settings系列技术指南之一围绕「数值格式化」功能展开它作用于数值类型字段含公式字段的阅读状态readPretty提供千分位分隔符、小数位精度、单位换算乘/除、前后缀与科学记数法等配置能力。读完本文你将掌握在 NocoBase 界面搭建器中为金额、数量等数值字段配置统一显示格式的完整操作方法并理解其底层实现原理对应源码见 ReadPretty.tsx 与 SchemaSettingsNumberFormat.tsx。介绍数值格式化是指对阅读状态下的数值类型字段包括公式字段进行视觉上的美化和规范化处理包括千分位分隔符、小数位数精度、单位换算、科学记数法等设置。通过配置数值格式化可以满足不同地区和行业的数值表达习惯。该功能在 NocoBase 中由数字输入框组件InputNumber的只读展示Read Pretty能力承载。当字段处于阅读状态时原始数值并不会被直接原样输出而是经过「单位换算 → 精度换算 → 分隔符换算 →可选科学记数法」这条流水线处理后渲染其核心入口为formatNumber函数见 ReadPretty.tsx。使用说明数值格式化支持以下能力简单的单位换算乘除在原始数值基础上进行乘法或除法运算例如将「分」换算为「元」、将「克」换算为「千克」千分位分隔符按三位一组插入千分位符号并提供多种地区的分隔符习惯前后缀为格式化后的数值附加前缀如货币符号或后缀如单位元精确度控制小数点后保留的位数科学记数法将大数或极小数值以科学计数形式展示指数以上标呈现。典型示例订单金额格式化对订单金额进行格式化包括添加货币符号人民币符号、千分位分隔符如逗号或点号、小数精度等使金额清晰易读。例如原始值1234567.89配置前缀、分隔符0,0.00、精度0.01后阅读状态将显示为1,234,567.89。典型示例科学记数法当数值极大如11111111111时可将显示格式切换为科学记数法阅读状态将渲染为1.11×10¹⁰形式指数部分以上标呈现便于在表格列宽有限时展示超大数值。配置入口数值格式化的配置入口位于字段的「字段设置Field Settings」弹层中操作路径为在界面搭建器中选中数值类型字段或公式字段打开「字段设置」找到「格式Format」菜单项并点击弹出格式化配置弹窗。该配置项由 SchemaSettingsNumberFormat 组件实现。配置结果会以x-component-props的形式写回字段的 schema 中并通过dn.emit(patch, { schema })触发 schema 补丁最终同步到字段的只读展示组件上。配置项详解格式化配置弹窗共包含六个配置项下表汇总了各项的名称、含义与可选值配置项含义可选值 / 默认值样式Style显示格式风格normal普通默认、scientifix科学记数法单位换算Unit conversion乘/除换算的倍数数值型前置下拉框选择运算符*乘以或/除以默认*分隔符Separator千分位与小数分隔符样式0,0.00默认、0.0,00、0 0,00、0.00无千分位精确度Precision小数点后保留位数从1到0.00000001共 9 档对应 08 位小数默认继承字段精度前缀Prefix数值前附加文本任意字符串如、$后缀Suffix数值后附加文本任意字符串如元、kg上述枚举与默认值均可在 SchemaSettingsNumberFormat.tsx 的 schema 定义中查到。样式Style样式决定数值的整体展示形态只有两个选项Normal普通按常规十进制方式显示为默认值Scientifix notation科学记数法以科学记数法显示。底层实现位于 scientificNotation 函数它基于d3-format的format(\.${decimalPlaces}e)生成尾数与指数并把指数统一渲染为×10…上标形式正指数省略号负指数保留-号。例如11111111111在精度0.01下会显示为1.11×10¹⁰。单位换算Unit conversion单位换算允许在原始数值基础上进行乘法或除法运算适用于金额单位换算如分→元除以 100、重量单位换算如克→千克除以 1000等场景。配置项由两部分组成运算符下拉框Multiply by乘以默认或Divide by除以对应源码中的unitConversionType属性取值为*或/倍数输入框乘除的系数对应unitConversion属性。底层实现为 formatUnitConversion 函数当倍数为 0 且运算符为除法时会输出错误日志并返回null避免除零运算结果会经过math.round(result, 9)四舍五入到 9 位小数避免浮点误差累积。仓库内置的示例 unit-conversion.tsx 展示了两种配置unitConversion: 10默认乘以 10与unitConversion: 10, unitConversionType: /除以 10原始值100分别显示为1000与10。分隔符Separator分隔符用于控制千分位与小数点的显示符号共四种预设适应不同国家和地区的书写习惯配置值千分位小数位示例数值 1234567.890,0.00默认,.1,234,567.890.0,00.,1.234.567,890 0,00空格.1 234 567.890.00无.1234567.89这些预设与源码中 separators 常量一一对应。在 formatNumberWithSeparator 中小于等于Number.MAX_SAFE_INTEGER的数值通过toLocaleString(en-US)生成带千分位的字符串再按预设将占位符替换为目标符号超过安全整数范围的超大数值则走 formatBigNumberWithSeparator 分支使用bignumber.js与正则\B(?(\d{3})(?!\d))完成整数部分的三位分组保证大数场景下不出现精度丢失。仓库演示 separator.tsx 以1234567.89为例同时展示了默认样式、0,0.00、0.0,00、0 0,00四种分隔符的渲染差异对应单元测试见 input-number.test.tsx。精确度Precision精确度控制小数点后保留的位数提供从1到0.00000001共 9 个档位分别对应 08 位小数配置值保留小数位示例数值 110 位10.11 位1.00.012 位1.000.0013 位1.0000.00014 位1.00000.000015 位1.000000.0000016 位1.0000000.00000017 位1.00000000.000000018 位1.00000000该配置对应step属性默认值取字段本身的精度设置见 SchemaSettingsNumberFormat.tsx 中step || prescition || 1的取值逻辑。在渲染流水线中精度换算通过toFixedByStep完成并作为小数位位数传入后续的分隔符格式化逻辑。前缀Prefix与后缀Suffix前缀与后缀为纯文本附加项渲染时分别显示在数值的左右两侧由addonBefore与addonAfter两个属性承载。典型用法包括前缀货币符号如、$、€后缀计量单位或币种如元、kg、USD。在 ReadPretty.tsx 的渲染中格式化后的数值字符串通过dangerouslySetInnerHTML注入以支持科学记数法的上标 HTML前后缀则作为普通 React 节点包裹在两侧因此前后缀本身不会被再次格式化。底层渲染流水线综合源码可以梳理出阅读状态数值渲染的完整调用链入口formatNumber(props)ReadPretty.tsx先校验值是否有效isValid无效则返回null调用formatUnitConversion(value, unitConversionType, unitConversion)完成单位换算乘/除结果四舍五入至 9 位小数调用toFixedByStep(unitData, step)完成精度换算调用formatNumberWithSeparator(...)完成分隔符换算含大数安全分支若formatStyle scientifix则改用scientificNotation(...)输出科学记数法。该流水线完整实现了文档开头所述的五类能力单位换算、千分位分隔符、前后缀、精确度、科学记数法。ReadPretty组件通过useMemo对上述结果做记忆化仅在step、formatStyle、value、unitConversion、unitConversionType、separator任一发生变化时重新计算。与输入组件的整体关系数值格式化是InputNumber组件「只读展示」能力的组成部分。在编辑状态下该组件基于 ant-design 的 InputNumberinterface InputNumberReadPrettyProps { formatStyle?: normal | scientifix; unitConversion?: number; /** * default * */ unitConversionType?: * | /; /** * default 0.00 */ separator?: 0,0.00 | 0.0,00 | 0 0,00 | 0.00; step?: number; value?: any; addonBefore?: React.ReactNode; addonAfter?: React.ReactNode; }仓库中的演示代码 format-style.tsx 展示了通过 schema 声明式配置formatStyle: scientifix使大数11111111111以科学记数法展示的完整用法对应科学记数法的单元测试见 input-number.test.tsx。开发者若要在自定义 schema 中直接使用该能力同样只需在x-component-props中声明上述属性即可与界面搭建器中的可视化配置结果完全等价。小结数值格式化是 NocoBase 字段设置中面向「阅读状态」的展示层能力通过样式、单位换算、分隔符、精确度、前后缀六个配置项的灵活组合可覆盖金额、数量、比例、大数等绝大多数业务展示需求。其配置结果以x-component-props持久化到字段 schema底层由formatNumber流水线统一执行既有可视化配置的易用性又有源码级的高精度保证大数走bignumber.js分支、单位换算结果四舍五入至 9 位小数、科学记数法上标渲染是搭建报表、表单与详情页时不可或缺的基础能力。【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考