前端中的簡單程式設計題-字串（1）

thomaszhou發表於2019-02-23
前端程式設計字串

一邊學習前端，一邊通過部落格的形式自己總結一些東西，當然也希望幫助一些和我一樣開始學前端的小夥伴。

如果出現錯誤，請在評論中指出，我也好自己糾正自己的錯誤

前端中的簡單程式設計題-字串（1）

author： thomaszhou

字串操作

編寫函式把URL引數解析為一個物件

ar url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2.............";
var obj = parseQueryString(url);
console.log(obj);// {key0: "0", key1: "1", key2: "2............."}

function parseQueryString(argu){
  var str = argu.split(`?`)[1];
  var result = {};
  var temp = str.split(`&`);
  for(var i=0; i<temp.length; i++)
  {
    var temp2 = temp[i].split(`=`);
    result[temp2[0]] = temp2[1];
  }
  return result;
}
複製程式碼

首字母大寫

  • 通用方法：每個單詞的首字母大寫
  • 方法一：利用slice方法進行大寫化的首字母和其餘的字串拼接

var str1 = `I believe I am the best`;
    function trans1(str1) {
      var arr = str1.toLowerCase().split(` `);
      for (var i in arr) {
          arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
      }
      return arr.join(` `);
    }
console.log(trans1(str1));//I Believe I Am The Best
複製程式碼
  • 方法二：直接用replace進行首字母替換
var str1 = `I believe I am the best`;
    function trans1(str1) {
      var arr = str1.toLowerCase().split(` `);
      for (var i in arr) {
          arr[i] = arr[i].replace(arr[i].charAt(0),arr[i].charAt(0).toUpperCase());
      }
      return arr.join(` `);
    }
console.log(trans1(str1));
複製程式碼
  • 方法三：用正規表示式匹配單詞和replace來做
//  /wS*/g匹配每一個單詞，其實類似於字串的陣列分解
    var str1 = `I believe I am the best`;
    function trans1(str1) {
      return str1.replace(/wS*/g, function (arr) {
          return arr.charAt(0).toUpperCase() + arr.slice(1).toLowerCase();
      });
    }
console.log(trans1(str1));
複製程式碼
  • 方法四：ES6，用正則匹配最開始的首字母以及空格分隔的每個單詞的首字母
var str1 = `I believe I am the best`;
    function trans1(str1) {
     return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
    }
console.log(trans1(str1));
複製程式碼

子模版匹配

從字串中找到某個子字串（用到indexof,substring,join）

    var str2 = `asdasfsdfasd1zhou1fsf`
    var target = `zhou`
    var x = str2.indexOf(target)
    var result1 = str2.substring(0, x)
//    var result1 = str2.substr(start,length)是從start開始，街區length個字元
    var result2 = str2.substring(x + target.length, str2.length)
//    console.log(typeof string)    string
    var result = result1 + result2
//    不建議用match()
//    var match = str2.match(target)[0]
//    console.log(match)匹配到第一個值
    console.log(result)
複製程式碼

字元和數字互換

  • 1、數字轉換為字串

    • a. 要把一個數字轉換為字串，只要給它新增一個空的字串即可：
    var n = 100; 
var n_as_string = n + ""; 
複製程式碼
    • b. 要讓數字更加顯式地轉換為字串,可以使用String()函式:
    var string_value = String(number); 
複製程式碼
    • c. 使用toString()方法
    string_value = number.toString(); 
複製程式碼

    Number物件的（基本的數字轉換為Number物件，以便可以呼叫這個方法）toString()方法有一個可選的引數，該引數用來指定轉換的基數。如果不指定這個引數，轉換會以10為基數進行。然而，也可以按照其他的基數（2到36之間的數）來轉換數字。

    var n = 17; 
binary_string = n.toString(2); //  "10001" 
octal_string = "0" + n.toString(8); //  "021"   
hex_string = "0x" + n.toString(16); //  "0x11" 
複製程式碼
    • d.**toFixed()**方法把一個數字轉換為字串，並且顯示小數點後的指定的位數。它不使用指數表示法。
    var n = 123456.789; 
n.toFixed(0); // "123457" 
n.toFixed(1); // "123456.8" 
複製程式碼
    • e. toExponential()使用指數表示法把一個數字轉換為字串，小數點前面有1位數，而小數點後面有特定的位數。
    var n = 123456.789; 
n.toExponential(0); // "1e+5" 
n.toExponential(1); // "1.2e+5" 
複製程式碼

  • 2、字串轉換為數字

    • a. ：把Number()建構函式作為一個函式來呼叫：
    var number = Number(string_value); 
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100
複製程式碼
    • b. parseInt()只擷取整數，如果一個字串以”0x”或”0X”開頭，parseInt()將其解析成為一個十六進位制的數字，parseInt()甚至可以接受一個引數來指定要解析的數字的基數，合法的值在2到36之間。
    parseInt("3 blind mice"); // Returns 3 
parseInt("12.34"); // Returns 12 
parseInt("0xFF"); // Returns 255 
parseInt("11", 2); // Returns 3 (1 * 2 + 1) 
parseInt("ff", 16); // Returns 255 (15 * 16 + 15) 
parseInt("zz", 36); // Returns 1295 (35 * 36 + 35) 
如果十進位制數包含前導0，那麼最好採用基數10，這樣才不會意外地得到八進位制的值
parseInt("010"); //returns 8 預設八進位制
parseInt("077", 8); // Returns 63 (7 * 8 + 7) 
parseInt("077", 10); // Returns 77 (7 * 10 + 7) 
複製程式碼
    • c. parseFloat()擷取整數和浮點數。使用parseFloat()方法的另一不同之處在於，字串必須以十進位制形式表示浮點數，parseFloat()沒有基模式
    parseFloat("3.14 meters"); // Returns 3.14 
parseFloat("1234blue"); //returns 1234.0
parseFloat("0xA"); //returns NaN
parseFloat("22.5"); //returns 22.5
parseFloat("22.34.5"); //returns 22.34
parseFloat("0908"); //returns 908
parseFloat("blue"); //returns NaN

如果parseInt()和parseFloat()不能夠把指定的字串轉換為數字，它們就會返回NaN: 
parseInt(``eleven"); // Returns Nan 
parseFloat("$72.47"); // Returns NaN 
複製程式碼
    • d. Boolean()函式將返回true。如果該值是空字串、數字0、undefined或null，它將返回false。
    Boolean(""); //false – empty string
Boolean("hi"); //true – non-empty string
Boolean(100); //true – non-zero number
Boolean(null); //false - null
Boolean(0); //false - zero
Boolean(new Object()); //true – object
Boolean(undefined) // false
複製程式碼
  • 3、利用js變數弱型別轉換
var str = `12.345`// 有效
var str = `123.4.4`//NaN
var str = `12r3`//NaN

var str= `012.345 `;
var x = str-0;
x = x*1;
複製程式碼
  • 4額外知識點: JavaScript取整的方法
    • a.丟棄小數部分,保留整數部分
      parseInt(5/2)
    • b.向上取整,有小數就整數部分加1 Math.ceil(5/2)
    • c.向下取整 Math.floor(5/2)
    • d.四捨五入 Math.round(5/2)
  • 5字串，數字互相轉換、asc碼轉換
傳入字串或者2位以上的數字，每個字元或者單個數字ascii碼減10
function toMD5(arg){
      var str = [];
      str = arg.split(``);
      len = str.length;
      for(var i = 0; i < len; i++){
      //str.charCodeAt()  將字元str變成ascii碼
      //String.formCharCode(str)   將ascii碼str變成字元
        str[i] = String.fromCharCode(str[i].charCodeAt() - 10);
      }
      return str;
    }
複製程式碼

重複字串

這裡所說的重複字串是指對所給的字串根據第一個數字引數重複次數

repeatStringNumTimes("*", 3)返回***
repeatStringNumTimes("abc", -2)
複製程式碼
  • 方法一： 基本迴圈
function fn1(str, num) {
  str1 = ``;
  while (num > 0) {
    str1 += str;
    num--;
  }
  return str1;
}
console.log(fn1(`a`,4));
複製程式碼
  • 方法二：新增到陣列中，最後用join拼接
function fn2(str, num) {
  arr = [];
  for (var i = 0; i < num; i++) {
      arr.push(str);
  }
  return arr.join(``);
}
console.log(fn2(`a`,4));
複製程式碼
  • 方法三：new Array()是新建一個陣列，然後將要重複的字元拼接“，就相當於重複字串
function fn3(str, num) {
//  如果重複兩個a,那需要三個``,
//    ``+`a`+``+`a`+``;
  return num < 0 ? ``: new Array(num + 1).join(str);
}
console.log(fn3(`a`,4));
複製程式碼
  • 方法四：遞迴
//遞迴
function repeat(str, num) {
  if (num === 0) {
    return ``;
  }
  if (num === 1){
    return str;
  }else{
    return str + repeat(str, num-1);
  }
}
console.log(repeat(`b`, 4));
複製程式碼

檢測字串b內的字元是否都在字串a中出現

對一個包含兩個元素的陣列，檢測陣列中的第二個元素的所有字母是否都在第一個元素中出現過，如果出現過，返回的是true，否則返回的是false。(其中忽略大小寫)

  • 簡單分解一下：
    • 將目標字串(陣列中的第一個元素arr[0])和測試字串(陣列中的第二個元素arr[1])轉換為小寫字串(通過toLowerCase())
    • 將陣列中的兩個元素分別轉換為陣列(通過split())
    • 使用for迴圈將測試字串每個字元傳入到目標字串中搜尋(通過indexOf())
    • 如果搜尋傳回值為負數，也就是indexOf()傳來的值為-1，則返回false，也就是說測試字串在目標字串中沒有匹配的字串
    • 若全部字串匹配(indexOf()的值大於或等於0)，返回true
var arr = [`hello world`,`eowl`];
    var arr1 = [`hello world`,`howa`];
    function mutation(arr) {
        var str1 = arr[0].toLowerCase().split(``),
            str2 = arr[1].toLowerCase().split(``);
        console.log(str1);
        console.log(str2);
        var value = [];//儲存匹配的字元的下標
        for (var i = 0, len = str2.length; i < len; i++) {
          var temp = str1.indexOf(str2[i]);
          value.push(temp);
          if (temp === -1) {
              console.log(value);
              //arr1為引數value值(匹配錯誤)：[0,4,6,-1]
            console.log(`false`);
            return false;
          }
        }
        console.log(value);//匹配正確時：[1,4,6,2]
        console.log(`true`);
        return true;
    }
    mutation(arr);
複製程式碼

相關文章