08day-字符串，查询字符串 queryString

最新推荐文章于 2025-05-22 21:23:43 发布

原创最新推荐文章于 2025-05-22 21:23:43 发布 · 1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文详细介绍了JavaScript中字符串的概念、创建方式、基本操作（如length属性、索引访问、遍历等）、常用方法（如charAt、charCodeAt、字符串转换等）以及处理查询字符串的函数。

字符串

概念

在js内用单/双/反单引号包裹的内容就是字符串
字符串是一个包装数据类型（String、Number、Boolean）

包装数据类型

存储的时候，是以基本数据类型的形式去存
当你使用的时候，他会瞬间转成复杂数据类型的样子让你使用
当你使用完毕，瞬间转成基本数据类型的形式去存储

创建

字面量
let str = "hello world";

  let s1 = "hello world"
  let s2 = "hello world"

内置构造函数
语法：let str = new String(“你想创建的字符串”)
很少这样去创建字符串

    let str = "hello world";
    console.log(str.length);
    let s1 = "hello world"
    let s2 = "hello world"
    console.log(s1 === s2); // true

    let s3 = new String("hello world");
    let s4 = new String("hello world");
    console.log(s3);

    let n1 = 1;
    let n2 = new Number(1);
    console.log(n2);
    console.log(n2 == n1); // true
    console.log(n2 === n1); // false

    let b1 = true;
    let b2 = new Boolean(true);
    console.log(b2);
    console.log(b2 == b1); // true
    console.log(b2 === b1); // false

基本操作

length属性

是一个只读属性只能获取，不能设置
读：
- 语法：str.length
- 获取到的就是该字符串的长度，也就是 str 由多少个字符组成
- 注意：空格也算一个字符，中文也是

    let str = "hello world";
    console.log(str.length); // 11,空格也是一个字符
    str.length = 1; // 没有意义
    console.log(str);
    console.log(str.length);

索引属性

只读
读：
- str[index]
- 获取到的就是该字符串指定位置的那一个字符
- 如果有该索引，就是对应的字符
- 如果没有该索引，那就是undefined。

    let str = "hello world";
    console.log(str[4]); // o
    let str2 = new String("hello world");
    console.log(str2);

    str[4] = "z"; // 无意义
    console.log(str);

遍历字符串

    let str = "hello world";
    for(let i = 0; i < str.length; i++){
      console.log(str[i]);
    }

    for(key in str){
      console.log(str[key]);
    }

字符串的常用方法

统一语法：str.xxx()
注意：所有的字符串方法都不会修改原始的字符串，都是以返回值的形式给到我们

charAt()

str.charAt(索引)
作用：用于获取索引位置上的字符
如果没有该索引，则会返回一个空字符串给我们

    let str = "hello world";
    let res = str.charAt(4);
    console.log(res); // o
    console.log(str[100]); // undefined
    console.log(str.charAt(100)); // ""

charCodeAt()

作用：返回指定字符的unicode编码。
语法：str.charCodeAt(索引)

    let str = "hello world";
    let res = str.charCodeAt(0)
    console.log(res); // 104
    console.log("0".charCodeAt()); // 48

toUpperCase()

作用：把所有字母转成大写
语法：str.toUpperCase()
返回值：转换好的字符串

toLowerCase()

作用：把所有字母转换成小写
语法：str.toLowerCase()
返回值：转换好的字符串

    let str = "hello world";
    let res = str.toUpperCase();
    console.log(res); // HELLO WORLD
    let res2 = res.toLowerCase();
    console.log(res2);

substr

作用：截取字符串
语法:str.substr(开始索引，多少个)

substring

作用：截取字符串
语法：str.substring(开始索引，结束索引)
包前不包后

    let str = "hello world";
    let res = str.substr(2,7);
    console.log(res);// llo wor
    let res2 = str.substring(2,7);
    console.log(res2); // llo w

slice()

语法：str.slice(开始索引，结束索引)
包前不包后，可以写负数

    let str = "hello world";
    // 表示【2】截取到【7】，包含2单不包含7
    let res = str.slice(2,-4);
    console.log(res); // llo w

replace()

作用：替换字符
语法：str.replace(换上字符，换下字符)
注意：只能替换出现的第一个
返回值：替换好的字符串

    let str = "hello world";
    let res = str.replace("l","*");
    console.log(res);

split()

作用：将字符串进行分割
返回值：一个数组，内容就是按照切割符号切开的每个部分
语法：str.split(“符号”)
- 可以不传参，会把整个字符串当作一个整体
- 传递一个(“”),一位一位的切割
- 传递一个(" "),以空格作为切割符

    let str = "hello world";
    let res = str.split();
    console.log(res);// ['hello world']
    let res2 = str.split("");
    console.log(res2);// ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
    let res3 = str.split(" ");
    console.log(res3); //  ['hello', 'world']

    let res4 = str.split("l");
    console.log(res4);

concat()

作用：拼接字符串
语法：str.concat(字符串)
返回值：拼接好的字符串

indexOf

lastIndexOf

trim()

语法：str.trim()
作用：去除字符串首位的空白内容

    let str = "       hello world     ";
    console.log(str);//        hello world     
    let res = str.trim() 
    console.log(res); // hello world

查询字符串 queryString

我们把所有被引号包裹的内容叫做字符串
因为字符串填充的内容不一样，我们做了一些细致分类
- 全部由数字组成的字符串：“数字字符串”
  - “123456789”
- 带有HTML格式的字符串：html字符串
  - ‘
    abcd
    ’
- 查询字符串
  - key=value&key=value
  - name=zhangsan&password=123456&gender=男
把一个信息变成查询字符串的形式
把查询字符串格式变成一个信息

    let yhInfo = {
      name:"ZD",
      age:18,
      gender:"男",
      password:"123456",
    }
    // 1.
    function queryStringFn(obj){
      let str = ""
      for(let key in obj){
        str += key + "=" + obj[key] + "&";
      }
      str = str.slice(0,-1);

      return str;
    }
    let yhQueryString = queryStringFn(ZDInfo);
    console.log(ZDQueryString);

      function parseQueryString(str, key) {

        let obj = {};

        // 2-1
        let tmpArr = str.split("&");
        // ["name=yh","age=18"]

        // 3. 遍历tmpArr
        tmpArr.forEach(function (item) {
          let t = item.split("=");
          // ["name","ZD"]
          let key = t[0];
          let value = t[1];
          obj[key] = value;
        });
        // if (key) {
        //   return obj[key];
        // } else {
        //   return obj;
        // }
        // obj[key] ? key = key : key = undefined;
        return key ? obj[key] : obj;

      }
      let parserYhInfo = parseQueryString(yhQueryString,"aaa");
      console.log(parserYhInfo);