세그먼트에 숫자를 제한하는 가장 우아한 방법은 무엇입니까?

하자의 말 x, a그리고 b숫자입니다. x세그먼트의 경계에 모자 를 씌워야합니다 [a, b].

쓸 수는 Math.max(a, Math.min(x, b))있지만 읽기가 쉽지 않다고 생각합니다. 누구나 더 읽기 쉬운 방법으로 이것을 쓸 수있는 영리한 방법이 있습니까?

당신이 그것을하는 방법은 꽤 표준입니다. 유틸리티 clamp기능을 정의 할 수 있습니다 .

/**
 * Returns a number whose value is limited to the given range.
 *
 * Example: limit the output of this computation to between 0 and 255
 * (x * 255).clamp(0, 255)
 *
 * @param {Number} min The lower boundary of the output range
 * @param {Number} max The upper boundary of the output range
 * @returns A number in the range [min, max]
 * @type Number
 */
Number.prototype.clamp = function(min, max) {
  return Math.min(Math.max(this, min), max);
};

(언어 내장 언어를 확장하는 것은 일반적으로 눈살을 찌푸 리지만)

덜 "수학"중심의 접근 방식이지만 작동해야합니다. 이런 식으로 </> 테스트가 노출되지만 (최소화보다 이해하기 쉬울 수 있음) "읽기"의 의미에 따라 다릅니다.

function clamp(num, min, max) {
  return num <= min ? min : num >= max ? max : num;
}

ECMAScript 2017 업데이트 :

Math.clamp(x, lower, upper)

그러나 현재로서는 1 단계 제안 입니다. 광범위하게 지원 될 때까지 polyfill을 사용할 수 있습니다 .

Math.clip = function(number, min, max) {
  return Math.max(min, Math.min(number, max));
}

이것은 "라이브러리 사용"대답이 아니라 Lodash를 사용하는 경우 사용할 수 있습니다 .clamp.

_.clamp(yourInput, lowerBound, upperBound);

그래서:

_.clamp(22, -10, 10); // => 10

Lodash 소스 에서 가져온 구현은 다음과 같습니다 .

/**
 * The base implementation of `_.clamp` which doesn't coerce arguments.
 *
 * @private
 * @param {number} number The number to clamp.
 * @param {number} [lower] The lower bound.
 * @param {number} upper The upper bound.
 * @returns {number} Returns the clamped number.
 */
function baseClamp(number, lower, upper) {
  if (number === number) {
    if (upper !== undefined) {
      number = number <= upper ? number : upper;
    }
    if (lower !== undefined) {
      number = number >= lower ? number : lower;
    }
  }
  return number;
}

또한 Lodash는 단일 메소드를 독립형 모듈로 사용 가능하게하므로이 메소드 만 필요한 경우 나머지 라이브러리없이 설치하면됩니다.

npm i --save lodash.clamp

es6 화살표 기능을 사용할 수있는 경우 부분 응용 프로그램 접근 방식을 사용할 수도 있습니다.

const clamp = (min, max) => (value) =>
    value < min ? min : value > max ? max : value;

clamp(2, 9)(8); // 8
clamp(2, 9)(1); // 2
clamp(2, 9)(10); // 9

or

const clamp2to9 = clamp(2, 9);
clamp2to9(8); // 8
clamp2to9(1); // 2
clamp2to9(10); // 9

함수를 정의하지 않으려 Math.min(Math.max(x, a), b)는 경우처럼 작성하는 것이 그렇게 나쁘지 않습니다.

화살표 섹시 함의 정신에, 당신은 마이크로 클램프 / 제약 / 게이트 / & c를 만들 수 있습니다. 나머지 파라미터를 사용하는 기능

var clamp = (...v) => v.sort((a,b) => a-b)[1];

그런 다음 세 가지 값을 전달하십시오.

clamp(100,-3,someVar);

다시 말하지만, 섹시하다면 '짧다'는 뜻입니다

그러면 삼항 옵션이 if / else로 확장되어 최소화 된 것은 삼항 옵션과 동일하지만 가독성을 희생하지는 않습니다.

const clamp = (value, min, max) => {
  if (value < min) return min;
  if (value > max) return max;
  return value;
}

35b (또는를 사용하는 경우 43b)로 축소합니다 function.

const clamp=(c,a,l)=>c<a?a:c>l?l:c;

또한 사용하는 성능 도구 또는 브라우저에 따라 Math 기반 구현 또는 3 진 기반 구현 중 어느 것이 더 빠른지에 대한 다양한 결과를 얻을 수 있습니다. 대략 동일한 성능의 경우 가독성을 선택합니다.

내가 좋아하는 것:

[min,x,max].sort()[1]