【JavaScript & jQuery】数値の長さを求める4つの方法を徹底解説！初心者でも安心

2024-05-19

JavaScriptとjQueryで数値の長さを求める方法

toString()メソッドとlengthプロパティを使う

この方法は、数値を文字列に変換してから、その文字列の長さを取得する方法です。

// JavaScript
function getLength(number) {
  return number.toString().length;
}

const result = getLength(12345);
console.log(result); // 5

// jQuery
$(function() {
  const number = 12345;
  const length = number.toString().length;
  console.log(length); // 5
});

Math.floor()とMath.log10()を使う

この方法は、数値を10のべき乗で表したときの指数部分の長さを求める方法です。

// JavaScript
function getLength(number) {
  if (number === 0) {
    return 1;
  }

  const log10 = Math.log10(Math.abs(number));
  const exponent = Math.floor(log10) + 1;
  return exponent;
}

const result = getLength(12345);
console.log(result); // 5

// jQuery
$(function() {
  const number = 12345;
  if (number === 0) {
    length = 1;
  } else {
    const log10 = Math.log10(Math.abs(number));
    const exponent = Math.floor(log10) + 1;
    length = exponent;
  }
  console.log(length); // 5
});

補足

上記のコード例では、正の数のみを対象としていますが、負の数や0を含む場合は、コードを修正する必要があります。
小数点以下の桁数を取得したい場合は、toFixed()メソッドなどを組み合わせて使用することができます。
より高度な方法としては、正規表現を用いる方法なども考えられます。

上記以外にも、様々な方法で数値の長さを求めることができます。ご自身の用途に合った方法を選択してください。

JavaScript

// 数値の長さを取得する関数
function getLength(number) {
  if (number === 0) {
    return 1;
  }

  const log10 = Math.log10(Math.abs(number));
  const exponent = Math.floor(log10) + 1;
  return exponent;
}

// 検証
const numbers = [123, 4567, -890, 0, 12.34, -56.789];
for (const number of numbers) {
  const length = getLength(number);
  console.log(`${number} の桁数は ${length} です。`);
}

このコードは以下の処理を実行します。

getLength()という関数を定義します。この関数は、引数として渡された数値の長さを返します。
numbersという配列に、様々な数値を格納します。
for...ofループを使用して、numbers配列の各要素に対して処理を実行します。
各要素に対して、getLength()関数を使用して桁数を取得します。
取得した桁数をコンソールに出力します。

jQuery

$(function() {
  // 数値の長さを取得する関数
  function getLength(number) {
    if (number === 0) {
      return 1;
    }

    const log10 = Math.log10(Math.abs(number));
    const exponent = Math.floor(log10) + 1;
    return exponent;
  }

  // 検証
  const numbers = [123, 4567, -890, 0, 12.34, -56.789];
  $.each(numbers, function(index, number) {
    const length = getLength(number);
    console.log(`${number} の桁数は ${length} です。`);
  });
});

このコードは、JavaScriptのコードとほぼ同じ処理を実行しますが、jQueryのeach()メソッドを使用してループ処理を行っています。

上記はあくまでも一例であり、状況に合わせて様々な方法で記述することができます。

JavaScriptとjQueryで数値の長さを求めるその他の方法

Array.prototype.reduce()を使う

この方法は、Array.prototype.reduce()メソッドを使用して、数値を文字列に変換した各文字の個数を合計することで、数値の長さを求める方法です。

// JavaScript
function getLength(number) {
  return number.toString().split('').reduce((count, _) => count + 1, 0);
}

const result = getLength(12345);
console.log(result); // 5

// jQuery
$(function() {
  const number = 12345;
  const length = number.toString().split('').reduce((count, _) => count + 1, 0);
  console.log(length); // 5
});

ループを使って文字列の長さをカウントする

この方法は、ループを使って文字列を1文字ずつ処理し、カウントをインクリメントすることで、数値の長さを求める方法です。

// JavaScript
function getLength(number) {
  let length = 0;
  for (const char of number.toString()) {
    length++;
  }
  return length;
}

const result = getLength(12345);
console.log(result); // 5

// jQuery
$(function() {
  const number = 12345;
  let length = 0;
  for (const char of number.toString()) {
    length++;
  }
  console.log(length); // 5
});

正規表現を使う

この方法は、正規表現を使用して、数値を表す文字列の長さを抽出する方法です。

// JavaScript
function getLength(number) {
  const regex = /\d+/;
  const match = number.toString().match(regex);
  if (match) {
    return match[0].length;
  } else {
    return 0;
  }
}

const result = getLength(12345);
console.log(result); // 5

// jQuery
$(function() {
  const number = 12345;
  const regex = /\d+/;
  const match = number.toString().match(regex);
  if (match) {
    length = match[0].length;
  } else {
    length = 0;
  }
  console.log(length); // 5
});