JS字符串轉整數的全面探討

一、原理解析

JS字符串轉整數的底層原理為Unicode編碼值相減再乘以權重（10的冪），詳細解析如下：

function strToInt(str) {
  let res = 0;
  let sign = 1;
  let i = 0;
  
  // 處理空格
  while(str[i] === ' ') {
    i++;
  }
  
  // 處理正負號
  if(str[i] === '+' || str[i] === '-') {
    sign = str[i] === '+' ? 1 : -1;
    i++;
  }
  
  // 處理數字部分
  const zeroCode = '0'.charCodeAt(0);
  while(i = '0' && str[i] <= '9') {
    const curCode = str[i].charCodeAt(0);
    res = 10 * res + (curCode - zeroCode);
    i++;
  }
  
  return sign * res;
}

首先，將字符串中的空格去除，然後處理正負號，如果有正號，則不用處理；如果有負號，則標記為負數。接着，處理數字部分。在Unicode編碼表中，數字0到9的編碼值是連續的，因此可以用當前字符的編碼值減去0的編碼值得到數字的值，再乘以相應的權重（10的冪），最後累加得到最終結果。

二、常見應用場景

字符串轉整數在實際開發中很常見，以下是幾個常見的應用場景：

1.表單驗證

在表單驗證過程中，經常需要將用戶輸入的字符類型的數值轉換為數字類型的數值進行比較，以判斷用戶輸入的值是否符合規則。

function validateNumber(value) {
  if(Number.isInteger(parseInt(value))) {
    // value可以轉換為整數，繼續其他驗證
  } else {
    // value不能轉換為整數，返回錯誤信息
    return '請輸入整數';
  }
}

2.轉換數據類型

在進行一些數據處理時，藉助JS字符串轉整數可以快速將string類型的數據轉換成number類型。

const str = '123';
const num = strToInt(str);
console.log(typeof num); // 'number'

3.省略小數點後0

在一些需要顯示具體數字的場景下，省略小數點後的0可以讓顯示效果更友好，例如顯示購物車中的金額。

function formatMoney(amount) {
  const integer = Math.floor(amount);
  const decimal = Math.floor((amount - integer) * 100);
  
  let decimalStr = strToInt(decimal) + '';
  
  // 保證小數點後有兩位
  if(decimalStr.length === 1) {
    decimalStr = '0' + decimalStr;
  }
  
  return integer + '.' + decimalStr;
}

console.log(formatMoney(18.9)); // '18.90'

三、字符串轉整數的兼容性問題

在不同的瀏覽器環境下，字符串轉整數的行為可能會有所不同。以下是一些常見的兼容性問題以及解決方案：

1.ES5標準前parseInt會忽略小數部分

在ES5標準前，parseInt函數會忽略小數點後的部分，導致字符串轉整數時出現錯誤。

parseInt('18.9'); // 18，實際期望為 18.9

解決方案：使用類似於strToInt的自定義函數實現字符串轉整數。

2.十六進制字符串轉整數問題

在一些特殊場景下，需要將十六進制字符串轉換為整數，例如CSS中的顏色值。使用parseInt函數進行轉換時，需要指定第二個參數為進制數。

parseInt('ff', 16); // 255

解決方案：注意進制數使用。

3.浮點數字符串轉整數問題

在一些特殊場景下，需要將浮點數字符串轉換為整數。由於浮點數的小數部分可能會非常複雜，通過簡單的方式將其轉換為整數可能會出現精度丟失的問題，因此需要使用更為複雜的解決方案。

function floatToInt(value) {
  const strArr = value.split('.');
  const integerStr = strArr[0];
  const decimalStr = strArr[1] || '';
  
  const integer = strToInt(integerStr);
  const decimal = strToInt(decimalStr) * Math.pow(10, (-1 * decimalStr.length));
  
  return integer + decimal;
}

console.log(floatToInt('18.9')); // 18.9

解決方案：將浮點數字符串按照小數點分割為整數部分與小數部分，然後分別轉換並計算。

四、優化與擴展

字符串轉整數函數是一個常見的運算函數，在實際開發中可以藉助一些優化技巧來提高其性能和擴展性。

1.使用位運算加速

JavaScript中位運算的速度非常快，因此可以使用位運算替代乘除運算以提高速度。

function strToInt(str) {
  let res = 0;
  let sign = 1;
  let i = 0;
  const zeroCode = '0'.charCodeAt(0);
  
  // 處理空格
  while(str[i] === ' ') {
    i++;
  }
  
  // 處理正負號
  if(str[i] === '+' || str[i] === '-') {
    sign = str[i] === '+' ? 1 : -1;
    i++;
  }
  
  // 處理數字部分
  while(i = '0' && str[i] <= '9') {
    res = (res << 1) + (res << 3) + (str[i].charCodeAt(0) - zeroCode);
    i++;
  }
  
  return sign * res;
}

2.支持更多類型的字符串

在一些特殊場景下，字符串轉整數可能需要支持更多類型的字符串，例如科學計數法表示的數字。此時，可以將字符串轉為數字後，再將數字轉為整數。

const str = '2e3';
const num = Number(str);
console.log(num); // 2000
console.log(Math.floor(num)); // 2000

解決方案：先將字符串轉為數字，然後使用Math.floor函數進行取整。

3.支持更多進制的轉換

除了十進制之外，還有二進制、八進制、十六進制等多種進制。可以針對不同的進制設計不同的字符串轉整數函數。

function binaryToInt(str) {
  let res = 0;
  let i = 0;
  
  while(i < str.length) {
    res = (res << 1) + (str[i] - '0');
    i++;
  }
  
  return res;
}

function octalToInt(str) {
  let res = 0;
  let i = 0;
  
  while(i < str.length) {
    res = (res << 3) + (str[i] - '0');
    i++;
  }
  
  return res;
}

function hexToInt(str) {
  let res = 0;
  let i = 0;
  
  while(i = 48 && curCode <= 57) {
      res = (res <= 65 && curCode <= 70) {
      res = (res <= 97 && curCode <= 102) {
      res = (res << 4) + (curCode - 87);
    }
    i++;
  }
  
  return res;
}

解決方案：根據不同的進制，使用不同的權重（如2的冪、8的冪、16的冪）進行計算。

五、總結

字符串轉整數是一個常見的運算函數，在實際開發中很有用處。通過本文的探討，我們能夠更深入地了解字符串轉整數的底層原理以及常見的應用場景，還能夠學習到如何處理兼容性問題、優化性能、擴展功能等知識點。雖然字符串轉整數看起來很簡單，但是深入了解它還有許多需要探討的地方。