在前端开发中，涉及到长度、宽度、高度等属性时，通常是使用带有单位的 CSS 属性值，例如 width: 100px; 或 height: 50vh;。然而，在一些情况下，我们可能需要将这些属性值去掉单位，这时候就可以使用 @bolt/tools-strip-unit 这个 npm 包。
简介
@bolt/tools-strip-unit 是一个可以将 CSS 属性值中的单位去掉的工具包，它支持多种单位，包括 px、em、rem、vw、vh 等等。使用该工具包，可以让我们更方便地将 CSS 属性值转换为数值，从而进行一些数学计算或者其他操作。
安装
要使用 @bolt/tools-strip-unit，需要通过 npm 进行安装。在终端中输入以下命令：
npm install @bolt/tools-strip-unit
安装完成后，就可以在代码中使用该工具包了。
使用方法
@bolt/tools-strip-unit 提供了两种使用方法：
1. stripUnit(value: string): number
直接将带有单位的属性值作为参数传入，即可返回去掉单位后的数值。
import { stripUnit } from "@bolt/tools-strip-unit";
const widthWithUnit = "100px";
const widthWithoutUnit = stripUnit(widthWithUnit); // 1002. stripUnit() 函数
如果想要在 CSS 中使用 stripUnit() 函数，可以先将 @bolt/tools-strip-unit 引入到项目中，并创建一个 SCSS 函数来调用它。
-- -------------------- ---- ------- -- -- ---------------------- ------- -------------------------- -- -- ----------- -- --------- ----------------- - ------- --------------------- - -- -- ----------- -- --- - ------ ----------------- -
示例
以下是一个示例，展示了如何使用 @bolt/tools-strip-unit 来操作 CSS 属性值。
-- -------------------- ---- ------- ------ - --------- - ---- ------------------------- ----- ------------- - -------- ----- ---------------- - ------------------------- -- --- ----- ----------- - ------------------ -- --------- ----- ----- ------------- - --- - ------------ - --- -- ------------- ----- ------------------------ - ------------------------- -- --------- ----- --- - ------------------------------ --------------- - -------------------------------- -------------------------------
该示例中，通过 stripUnit() 函数将屏幕一半宽度的一半宽度转换为数值，然后将其应用到新创建的 DIV 元素上，实现了动态计算宽度的效果。
总结
@bolt/tools-strip-unit 工具包为前端开发者提供了一种快速、方便地去掉 CSS 属性值中单位的方式，使得我们可以更自由地操作 CSS 属性值，进一步提高了代码的可复用性和灵活性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa54b5cbfe1ea061045e