(day 18)JavaScript学习笔记（字符串的相关操作）

概述 

        这是我的学习笔记，记录了JavaScript的学习过程。在写博客的时候我会尽量详尽的记录每个知识点。如果你完全没接触过JavaScript，那么这一系列的学习笔记可能会对你有所帮助。

        今天学习字符串的相关操作，主要包括字符串的定义、转义字符、字符串裁切、字符串拼接、大小写转换、去除空格以及模板字符串等。

        在前面学习过程中已经看到了很多字符串的案例了，今天系统学习字符串的相关操作。

1.字符串定义

         定义字符串可以使用字面值创建，这种定义方式也是常用的，使用起来也比较方便，如下代码示例：

//使用字面值
var str1 = "hello";
console.log(str1); //hello

        还可以使用构造函数String来创建字符串对象，如下代码：

//使用String构造函数
var str2 = new String("你好");
console.log(str2); //String {'你好'}

        注意我们直接log它，得到的是这样的，如下截图：

       如果我们想直接拿到String对象中的内容可以用Valueof方法，如下代码

console.log(str2.valueOf()); //输出：你好

         但是在JavaScript中，对象在大多数情况下会被自动转换为它们的原始值，所以当你在需要字符串的地方使用String 对象时，它通常会被自动转换为字符串，如下代码所示，虽然str2是一个String 对象，但在console.log、字符串连接等操作中，它会被自动转换为它的原始字符串值。因此，我们通常不需要显式地“拿出”字符串，JavaScript会自动为我们处理转换。

console.log(str2 + "!"); //输出：你好!

 2.转义字符

        转义字符用于在字符串中表示那些无法直接通过字面量输入的特殊字符。转义字符以反斜杠 \ 开头，后面跟着一个或多个字符，这些字符组合起来表示一个特定的字符或操作。下面是一些JavaScript中常用的转义字符：

        ①换行符(\n)： 用于在字符串中插入一个换行符。如下代码示例：

var str3 = "第一行\n第二行";
console.log(str3);
// 输出：
// 第一行
// 第二行

        ②制表符(\t) :用于在字符串中插入一个制表符（Tab）。如下代码示例：

var st4r = "项目\t值";
console.log(st4r);
// 输出：项目    值

        注意：制表符与直接用空格是不太一样的，如下示例我们多log几行内容，字数不一样，可以看下输出效果，如下代码：

var str5 = "项目\t值\n项目项\t值\n项目项目\t值值";
console.log(str5);

        输出效果如下：

        ③ 反斜杠（\\）:用于在字符串中表示一个反斜杠字符本身。如下代码示例:

var str6 = "路径是C:\\Users\\Name";
console.log(str6);
// 输出：路径是C:\Users\Name

        ④ 单引号（\'）:用于在单引号括起来的字符串中表示单引号字符。如下代码示例:

var str7 = '这是一个\'单引号\'';  
console.log(str7);  
// 输出：这是一个'单引号'

         注意，由于我们在第一天上课的时候安装过Prettier-Code formatter 插件，这个插件在我们保存时会自动格式化我们的代码，我们上面写的单引号字符串内包含单引号的情况会自动格式化把最外层的单引号改成双引号，这也是我们推荐的写法，如下代码所示：

var str7 = "这是一个'单引号'";
console.log(str7);
// 输出：这是一个'单引号'

           ⑤ 双引号（\"）：用于在双引号括起来的字符串中表示双引号字符。如下代码所示：

var str8 = "这是一个\"双引号\"";  
console.log(str8);  
// 输出：这是一个"双引号"

        双引号的情况与单引号类似，Prettier-Code formatter 插件会把外层单引号改成双引号，如下代码所示：

var str8 = '这是一个"双引号"';
console.log(str8);
// 输出：这是一个"双引号"

        ⑥Unicode字符(\uXXXX或\uxxxx)：用于表示一个Unicode字符，其中XXXX或xxxx是字符的Unicode码点。如下代码所示：

var str = "Hello, \u4F60\u597D!"; // "你好"的Unicode表示  
console.log(str);  
// 输出：Hello, 你好!

        以上便是常用的几种转义字符，JavaScript中还有一些其他的转义字符，但是不常用，感兴趣的读者可以自行查询搜索相关资料。

3.字符串遍历

        在JavaScript中实现字符串遍历有多种方式：

        ①for...of循环：最常用最简单的就是用for...of循环,for...of循环可以直接遍历可迭代对象（如数组、字符串等）的元素。如下代码示例：

//for...of循环
var str = "Hello, World!";
for (let item of str) {
  console.log(item);
}

        输出如下截图：

        ②使用for循环和charAt() 方法: charAt() 方法用于返回指定位置的字符。我们可以结合for 循环来遍历字符串中的每个字符。        

var str = "Hello, World!";
for (var i = 0; i < str.length; i++) {
  var char = str.charAt(i);
  console.log(char);
}

        字符串的遍历常用的就是上面这两种方式，还有其他的方式，不一一列举了。

4.字符串裁切

        字符串裁切可以使用slice() 方法和substring()方法,字符串中slice()方法与数组中slice()方法类似，它的语法结构如下。

字符串.slice(开始位置，结束位置)

        slice() 方法返回字符串中从指定的开始位置到结束位置（不包括结束位置）的子字符串，如果只指定一个参数，则返回指定的位置开始到整个字符串结尾，开始位置和结束位置可以是负数，如果开始位置大于结束位置会返回一个空的字符串。如下代码演示：

//slice()方法
console.log(str.slice(0, 5)); //输出：这是一个长
console.log(str.slice(5)); //输出：的字符串，this is a long string
console.log(str.slice(-5, -1)); //输出：trin
console.log(str.slice(4, 1));//起始位置大于结束位置，返回空的

         substring()方法与slice()方法类似，区别在于，它不能接受负数，如果有负数，默认会把负数转换成0，substring()方法中如果开始位置大于结束位置它会自动调换位置，把小的数字变成开始位置，大的数字变成结束位置，如下代码示意：

//substring()方法
console.log(str.substring(0, 5)); //输出：这是一个长
console.log(str.substring(5)); //输出：的字符串，this is a long string
console.log(str.substring(-5, -1)); //-5和-1都会转换成0，所以返回空的字符串
console.log(str.substring(-5, 5)); //-5会转换成0，所以输出：这是一个长
console.log(str.substring(4, 1)); //起始位置大于结束位置，二者会颠倒，输出：是一个

        以上便是常用的两种字符串裁切的方式。

5.字符串拼接

        字符串拼接可以用加号+拼接或者用concat方法，不过推荐使用加号。如下代码所示两种用法。

var str1 = "hello ";
var str2 = "world";

console.log(str1 + str2); //输出：hello world
console.log(str1.concat(str2)); //输出：hello world

 6.大小写转换

       在JavaScript中toUpperCasr() 方法用于将字符串中的所有字符转换为大写。toLowerCasr()  方法用于将字符串中的所有字符转换为小写,如下代码演示：        

var str = "Hello World";
console.log(str.toUpperCase()); //输出：HELLO WORLD
console.log(str.toLowerCase()); //输出：hello world

       注意在JavaScript中没有直接的方法可以将字符串字首字母或句首字母大写，如果要实现这个功能，需要结合其他的方法，或者自定义一个函数，感兴趣的读者可以自己尝试一下，也算是对学过的知识的一个小小的综合运用。

7.去除空格

        trim()方法可以去除一个字符串的首尾空格，但是不影响中间的空格，如下代码演示：

var str = "  hello world    ";
console.log(str.trim()); //输出：hello world

8.模板字符串

        模板字符串是ECMAScript 6（ES6）中引入的一种新的字符串形式，它在字符串中可以包含表达式，从而更加方便地进行字符串拼接和动态生成。模板字符串使用反引号（``）来包围，并在其中使用${表达式}的语法来插入变量或表达式的值。

        如下代码示例：

const name = "Alice";
const age = 25;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // 输出: Hello, my name is Alice and I am 25 years old.

        模板字符串还有一些复杂的用法，如下代码演示：

function greet(strings, gender) {
  let genderStr = "";
  if (gender === "M") {
    genderStr = "先生";
  } else if (gender === "F") {
    genderStr = "女士";
  }
  return `${strings}${genderStr}`;
}
var gender = "M";
var result = greet`你好，刘星${gender}`;
console.log(result); //你好，刘星先生

        以上便是今天的学习内容，如果对你有所帮助，请点个赞再走吧。