1. Description
- Strings are useful for holding data represented in text form. Some of the most common operations on strings are checking their length, constructing and concatenating them using the + and += string operators, checking the presence or position of substrings using the indexOf() method, or extracting them using the ?>substring() method substring.
——————— Quoted from the official website
2. Create a string
- Create a string as a primitive value from a string literal or as an object using the String() (en-US) constructor.
——————— Quoted from the official website
(1) Literal creation
① Syntax format:
let 变量名 = "字符串内容";
//typeof查看类型,值为String;
② Example:
<script>
let str = "value";
console.log(typeof str);
</script>
③ Operation effect
(2) New keyword creation
① Syntax format:
let 变量名 = new String("字符串内容");
//typeof查看类型,值为object,new是产生一个新对象;
② Example:
<script>
let str = new String("value");
console.log(typeof str);
</script>
③ Operation effect
(3) String () creation
① Syntax format:
let 变量名 = String("字符串内容");
//typeof查看类型,值为String;
② Example:
<script>
let str = String("value");
console.log(typeof str);
</script>
③ Operation effect
3. String attribute
(1) String length (length)
① Syntax format:
let 变量名 = "字符串内容";
//length查看字符串长度;
② Example:
<script>
let str = "value";
console.log(str.length);
</script>
③ Operation effect
4. String method
(1) charAt(): Get the character of the specified subscript of the string
- Get the character of the specified subscript, if no subscript position is specified, return 0, if no corresponding subscript is found, return an empty character;
① Syntax format:
let 变量名 = "字符串内容";
变量名.charAt(下标位置);
② Example:
<script>
let str = "value";
console.log(str.charAt(3));
</script>
③ Operation effect
(2) slice: String interception
- will generate a new string;
- The end subscript can be omitted, and after omitting, it means to the end of the string;
- The starting position can be negative, and when it is negative, it means starting from the last bit of the string;
① Syntax format:
let 变量名 = "字符串内容";
变量名.slice(起始下标,结束下标) //起始下标字符保留,结束下标字符不保留
② Example:
<script>
let str = "hello world";
console.log(str.slice(2,6));
</script>
③ Operation effect
(3) indexOf(): the subscript of the specified character in the query string
- Returns the subscript position of the first occurrence of the specified character, or -1 if not found;
1) Default query
① Syntax format:
let 变量名 = "字符串内容";
变量名.indexOf('要查询下标位置的字符');
② Example:
<script>
let str = "javascript";
console.log(str.indexOf("s"));
/script>
③ Operation effect
2) Specify the starting position of the query (positive number position)
① Syntax format:
let 变量名 = "字符串内容";
变量名.indexOf("要查询下标位置的字符",查询起始位置);
② Example:
<script>
let str = "Hello World";
console.log(str.indexOf("l",5));
</script>
③ Operation effect
3) Specify the starting position of the query (negative position)
① Syntax format:
let 变量名 = "字符串内容";
变量名.indexOf("要查询下标位置的字符",查询起始位置);
② Example:
<script>
let str = "Hello World";
console.log(str.indexOf("l",-5));
</script>
③ Operation effect
Notice
- The starting position of the query is optional. If the starting position is specified, the return value must be greater than or equal to the specified starting position. If the specified starting position is a negative value, it is equivalent to starting from 0
(4) search(): returns the position of the specified string
The difference between search() and indexOf()
- The difference between search() and indexOf() is that search() supports regular matching
For regular expressions, please refer to the official website documentation
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
① Syntax format:
let 变量名 = "字符串内容";
变量名.search("要查询的下标位置的字符,或者正则表达式");
② Example:
<script>
let str = "Hello World";
console.log(str.search("W"));
</script>
③ Operation effect
(5) replace(): character replacement in a string
- replace() is used to replace characters in strings, but only one can be replaced by default, and regular expressions are supported
① Syntax format:
let 变量名 = "字符串内容";
变量名.replace("替换前的字符","替换后的字符");
② Example:
<script>
let str = "javascript";
console.log(str.replace("j","J"));
</script>
③ Operation effect
(6) split(): Split the string and return an array
① Syntax format:
let 变量名 = "字符串内容";
变量名.split("分隔符");
② Example:
<script>
let str = "name:sex:age:height";
console.log(str.split(":")); //以:作为分隔,取:前后内容;
</script>
③ Operation effect
(7) trim(): Clear the leading and trailing spaces
1) Clean up the leading and trailing spaces — trim()
① Syntax format:
let 变量名 = "字符串内容";
变量名.trim();
② Example:
<script>
let str = " JavaScript ";
console.log(str); //清理前
console.log(str.trim()); //清理后
</script>
③ Operation effect
2) Clean up the first space — trimStart()
① Syntax format:
let 变量名 = "字符串内容";
变量名.trimStart();
② Example:
<script>
let str = " JavaScript ";
console.log(str); //清理前
console.log(str.trimStart()); //清理后
</script>
③ Operation effect
3) Clean up trailing spaces — trimEnd()
① Syntax format:
let 变量名 = "字符串内容";
变量名.trimEnd();
② Example:
<script>
let str = " JavaScript ";
console.log(str); //清理前
console.log(str.trimEnd()); //清理后
</script>
③ Operation effect
(8) includes(): Whether the query string contains the specified character
- Query whether the string contains the specified character, return a Boolean value (boolean), return true to contain, return false to not contain
① Syntax format:
let 变量名 = "字符串内容";
变量名.includes("要查找得字符");
② Example:
<script>
let str = "JavaScript";
console.log(str.includes("Script")); //包含
console.log(str.includes("Hello")); //不包含
</script>
③ Operation effect
(9) Extension
- A string can also be regarded as an array, and the character at the specified subscript position can be obtained through the subscript
① Syntax format:
let 变量名 = "字符串内容";
变量名[下标位置]; //可以通过字符串名[下标位置]获取对应的字符,但是只能获取,不能进行修改
② Example:
<script>
let str = "JavaScript";
console.log(str[0]);
console.log(str[1]);
console.log(str[2]);
console.log(str[3]);
console.log(str[4]);
console.log(str[5]);
console.log(str[6]);
console.log(str[7]);
console.log(str[8]);
console.log(str[9]);
</script>
③ Operation effect
For more string learning, please refer to the official document
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String