값 번호화

7179 단어 webdevutilsjavascript
CSS 값을 얻었지만 그것으로 수학을 하고 싶다면 어떻게 해야 할까요?

const width = window.getComputedStyle(document.body, null).getPropertyValue('width'); // 960px
document.body.style.width = (width / 2); // NaN


오 안돼! 😖

CSScalc() 구문을 사용할 수 있을 것 같습니다…

document.body.style.width = `calc(${width} / 2)`; // <body style="width: calc(960px / 2);">


이것은 모두 그런 간단한 계산에 적합하지만 매운 맛이 나기 시작하면 어떻게 될까요?

const padding = window.getComputedStyle(document.body, null).getPropertyValue('padding'); // 8px
const margin = window.getComputedStyle(document.body, null).getPropertyValue('margin'); // 32px
document.body.style.width = `calc(calc(${width} / 2) + calc(${padding} + calc(${margin} * 0.5))`;  // <body style="width: calc(calc(960px / 2) + calc(8px + calc(32px * 0.5)));">


으악! 역겨운! 🤮

실제로 원하는 것은 해당 문자열을 실수처럼 취급할 수 있는 것입니다. 맞습니까?

해당 문자열을 정수로 만드십시오.



JavaScript의 재미있는 특징/특징은 parseInt() 및 parseFloat()를 숫자로 시작하는 모든 문자열에 사용할 수 있으며 마법처럼 작동한다는 것입니다!

document.body.style.width = (parseInt(width, 10) / 2) + (parseInt(margin, 10) * 0.5) + parseInt(padding, 10) + 'px'; // <body style="width: 504px;">


여기서 마법은 JavaScript의 유형 추론입니다. "정수를 구문 분석"하기 때문에 전달된 문자열이 정수라고 가정할 때 많은 작업을 수행합니다.

다시 말하지만 이것은 효과가 있지만 저는 가정을 벗어나는 것을 좋아하지 않습니다. 그리고 아니요, TypeScript로 애플리케이션을 다시 작성하는 일은 일어나지 않을 것입니다. Reply Guy!

그 문자열을 확실히 정수로 만드십시오



코드만 원하는 경우 여기 있습니다...

const numberizeValue = (input) => parseFloat(input.split('').filter(x => !x.match(/[0-9.]/g)).join(''), 10);


이제 그것을 분해합시다!



먼저 parseFloat()를 사용하겠습니다. 소수점 이하 자릿수로 숫자를 "숫자화"할 수 있기 때문입니다. 숫자가 십진수라고 가정하고 Base 10을 사용하여 결과를 반환합니다.

다음으로 제공된 문자열을 input.split('') 를 사용하여 배열로 분해합니다. ''를 사용하면 개별 문자의 배열을 얻을 수 있습니다.

이제 .filter(x => !x.match(/[0-9.]/g) 를 사용하여 숫자가 아닌 문자를 제거하도록 배열을 필터링할 수 있습니다. match 함수의 RegEx는 0과 9 사이의 십진수와 마침표/마침표 문자를 찾습니다.

이제 배열에서 문자와 (대부분의) 구두점이 제거되었으므로 배열을 구문 분석할 문자열로 되돌릴 수 있습니다join.

Div가 가시 영역에 있는지 여부, div가 표시되는지 여부를 판단하는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage