JavaScript does not represent a single character, only a string String type, and the character type is equivalent to a string containing only one character.
String String is a basic data type of JavaScript. At the same time, JavaScript also supports String objects, which is a wrapper object with original values. JavaScript automatically converts between the original form and the object form when needed. This article will introduce the original String type and String wrapper object
definition
String type is a sequence of characters consisting of 16-bit Unicode characters enclosed in quotes.
String types are often used to represent text data, and at this time each element in the string is considered a code point. Each element is considered to occupy a position in this sequence, indexing these positions with non-negative values. The first character starts at position 0, the second character is at position 1, and so on
The length of the string is the number of elements (for example, a 16-bit value). The empty string has zero length, so it does not contain any elements
Unicode encoding
All characters can be written in the form of '/uxxxx', where xxxx represents the Unicode encoding of the character. For example, /u00A9 represents the copyright symbol
var s = '/u00A9';s // "©"
If a string contains actual text data, each element is considered a separate UTF-16 unit. Each character is stored in 16-bit (i.e. 2 bytes) UTF-16 format inside JavaScript
But UTF-16 has two lengths: for characters between U+0000 and U+FFFF, the length is 16 bits (i.e. 2 bytes); for characters between U+10000 and U+10FFFF, the length is 32 bits (i.e. 4 bytes), and the first two bytes are between 0xD800 and 0xDBFF, and the last two bytes are between 0xDC00 and 0xDFFFF, and the last two bytes are between 0xDC00 and 0xDFFFF.
For example, the character "?" corresponding to U+1D306 is written as UTF-16, which is 0xD834 0xDF06. The browser will correctly recognize these four bytes as one character, but the character length inside JavaScript is always fixed to 16 bits, and these four bytes will be treated as two characters.
var s = '/uD834/uDF06';s // "?"s.length // 2
For 4-byte Unicode characters from U+10000 to U+10FFFF, javascript is always treated as two characters (the character length attribute is 2)
quotation marks
String String is declared by double quotes (") or single quotes ('). Java declares strings with double quotes and characters with single quotes. Since ECMAScript does not have a character type, either of these two notations can be used, but the left and right quotes must match.
//Correct var sColor1 = "red";var sColor2 = 'red';//Error var sColor1 = "red';var sColor2 = 'red";
A string delimited by single quotes can contain double quotes, and a string delimited by double quotes can also contain single quotes.
'key = "value"'"It's a long journey"
JavaScript code may be mixed with strings of HTML code, and HTML code will also be mixed with JavaScript code. Therefore, it is best to use separate quote styles in javascript and HTML code each
Single quotes are used to represent strings in javascript, double quotes are used to represent strings in HTML event handlers
<button onclick = "alert('thanks')">click me</button>Backslash
If you want to use single quotes in a single quote delimited string, or double quotes in a double quote delimited string, you need to use a backslash (/)
Common situations are that the apostrophe and single quotes of English abbreviation and possessive writing are the same character, so you must use a backslash (/) to escape the apostrophe.
'Wouldn/'t you prefer this book?' //"Wouldn't you prefer this book?"'Did she says /'Hello/'?' //"Did she says 'Hello'?""Did she says /"Hello/"?" //"Did she says "Hello"?"
Multi-line characters
By default, strings can only be written in one line, and if they are divided into multiple lines, they will report an error.
//An error Uncaught SyntaxError: Invalid or unexpected token
'a
b
c';
In ECMAScript3, strings must be written in one line
In ECMAScript5, strings can be split into lines, each line must end with a backslash (/)
If you want to start a new line in a string direct quantity, you can use escape characters /n
//"onelongline"'one/long/line'/*"twolines"*/'two/nlines'
Escape characters
In JavaScript strings, backslashes (/) have special uses. Adding a character after the backslash symbol does not represent their literal meanings. They are used to represent some special characters, called escape characters
/0 empty bytes
/n
/tTable
/b Space
/r Enter
/f feed paper
// Slash
/' Single quotes
/" double quotes
/xnn represents a character in hexadecimal nn (n is 0-f), such as /x41 represents 'A'
/unnnn in hexadecimal nnnn represents a Unicode character (n is 0-f), such as /u03a3 represents the Greek character ε
If a backslash is used before a non-special character, the backslash is omitted
'/a' // "a"
If the string needs to contain a backslash, then another backslash needs to be added before the backslash to escape itself
"Prev // Next" // "Prev / Next"
Features
Strings in javascript are immutable. Once a string is created, it can never be changed. To change the string saved by a variable, first destroy the original string, and then fill the variable with another string containing the new value
A new string can be created by concatenating other strings through the + operator.
var lang = "java";lang = lang + "script"; //'javascript'
The actual process of the above code is: first create a new string that can hold 10 characters, and then fill in this string with 'java' and 'script'. The last step is to destroy the original strings 'java' and 'script', because these two strings are useless
This process occurs in the background and is also the reason why the snippet strings are slow in some old browsers (IE6), but later versions of the browser have solved this inefficiency problem
Turn string
There are two ways to convert a value into a string, toString() and String()
[Note] You can use an empty string "" + a value to convert the value to a string
toString()
The first is to use the toString() method that almost every value has. This method returns the string representation of the corresponding value
[Note] undefined and null do not have this method
undefined.toString();//Error null.toString();//Error true.toString();//'true'false.toString();//'false''abc'.toString();//'abc'1.23.toString();//'1.23'({}).toString();//[object Object][1,2,3,4].toString();//'1,2,3,4'(new Date()).toString();//"Sun Jun 05 2016 10:04:53 GMT+0800 (China Standard Time)"/ab/i.toString();//'/ab/i'String()
You can use the transformation function String() when you don't know if the value you want to convert is undefined or null.
The transformation function String() follows the following rules:
【1】If the value is null, return 'null'; if the value is undefined, return 'undefined'
【2】If the value is not null or undefined, call toString() method and return the original type value
【3】If the object returned by the toString() method, then call the valueOf() method to return the original type value. If the object returned by the valueOf() method is returned, an error will be reported
// "3"String({toString: function () {return 3;}})// "[object Object]"String({valueOf: function () {return 2;}})// "3"String({valueOf: function () {return 2;},toString: function () {return 3;}})Length attribute
Each instance of the String type has a length attribute, indicating the number of characters in the string. Since strings are immutable, the length of strings is also unchangeable.
The length attribute of a string is not enumerated in the for/in loop, nor can it be deleted through the delete operator.
[Note] For string s, the index of the last character is s.length - 1
var str = "test";console.log(str.length);//4str.length = 6;console.log(str,str.length);//"test",4
Example method
Object common method
The String type is a wrapper type corresponding to a string, inheriting the three methods of the Object object's general methods toString(), toLocaleString(), and valueOf().
【toString()】
toString() method returns the original string value of string
【toLocaleString()】
toLocaleString() method returns the original string value of string
【valueOf()】
The valueOf() method returns the original string value of the string
console.log("test".valueOf());//"test"console.log("test".toString());//"test"console.log("test".toLocaleString());//"test"Access character methods
There are four methods for accessing characters in strings: chartAt(), brackets[], charCodeAt() and fromCharCode().
【chartAt()】
The charAt() method receives a parameter based on the character position of 0 and returns the character at the specified position. When the parameter is empty or NaN, the default parameter is 0; when the parameter is out of range, an empty string is returned
var str = "hello";console.log(str.charAt(1));//econsole.log(str.charAt(-1));//''console.log(str.charAt(10));//''console.log(str.charAt());//h console.log(str.charAt(NaN));//h
The charAt() method involves implicit type conversion of the Number() function. If converted to a numeric value, the string will be output according to the above rules; if converted to NaN, the 0th character will be output.
var str = "hello";console.log(str.charAt(true));//'e'console.log(str.charAt(false));//'h'console.log(str.charAt('abc'));//'h'console.log(str.charAt({}));//'h'console.log(str.charAt([2]));//'l'[Note] The results of x.charAt(pos) and x.substring(pos, pos+1), x.substr(pos,1), x.slice(pos,pos+1) are equal to each other.
var str = "hello";console.log(str.charAt(1));//'e'console.log(str.substring(1,2));//'e'console.log(str.slice(1,2));//'e'console.log(str.substr(1,1));//'e'
【Branchs】
ECMAScript5 defines another way to access characters, using square brackets plus numeric indexes to access specific characters in a string. If the parameter is out of range or NaN, the output is undefined; if there is no parameter, an error will be reported; this method does not have the implicit type conversion of the Number() transformation function, but the parameter can be converted to a numeric value when it is an array of singular values.
[Note] IE7-Browser does not support
var str = "hello";console.log(str[0]);//hconsole.log(str[[1]]);//econsole.log(str[false]);//undefinedconsole.log(str[-1]);//undefinedconsole.log(str[NaN]);//undefinedconsole.log(str[]);//report error
【charCodeAt()】
The charCodeAt() method is similar to the charAt() method, which receives a parameter based on the character position of 0, but returns a 16-bit Unicode encoding of the character specified. The return value is a 16-bit integer, between 0-65535, that is, between 0x0000-0xffff
When the parameter is empty or NaN, the default parameter is 0; when the parameter is out of range, NaN is returned.
var str = "hello";console.log(str.charCodeAt());//104console.log(str.charCodeAt(0));//104console.log(str.charCodeAt(1));//101console.log(str.charCodeAt(-1));//NaNconsole.log(str.charCodeAt(10));//NaNconsole.log(str.charCodeAt(NaN));//104
Similarly, the charCodeAt() method involves implicit type conversion of the Number() function. If converted to a numeric value, the corresponding value will be output according to the above rules; if converted to NaN, the character encoding of the 0th character will be output.
var str = "hello";console.log(str.charCodeAt(true));//101console.log(str.charCodeAt(false));//104console.log(str.charCodeAt('abc'));//104console.log(str.charCodeAt({}));//104console.log(str.charCodeAt([2]));//l08【fromCharCode()】
The String constructor itself has a static method: fromCharCode(). The task of this method is to receive one or more character encodings and then convert them into a string. Essentially, this method performs the opposite operation from the instance method charCodeAt(). If the parameter is empty and NaN, an empty string is returned; if the parameter exceeds the range of 0-65535, the output characters are uncontrollable.
console.log(String.fromCharCode(104,101,108,108,111));//'hello'console.log(String.fromCharCode(0x6211,0x662f,0x5c0f,0x706b,0x67f4));//'I am a little match'console.log(String.fromCharCode());//''console.log(String.fromCharCode(NaN));//''console.log(String.fromCharCode(-1));console.log(String.fromCharCode(65560));
If a character takes up four bytes, it needs to be split into two characters.
console.log(String.fromCharCode(0xD842, 0xDFB7)); // "�line"
String stitching
There are two methods for string stitching: concat() and plus sign +
【concat()】
The concat() method is used to splice one or more strings and return the new string obtained by splicing, while the original string does not change. If the parameter (except the first parameter) is not a string, it is implicitly converted to a string through the String() method, and then string splicing is performed.
var stringValue = 'hello ';var result = stringValue.concat('world','!');console.log(result);//'hello world!'console.log(stringValue);//'hello'[Note] The first parameter can only be a string. If it is of other types (except arrays), an error will be reported.
(1).concat('2');//Report an error
(true).concat('false');//Report an error
({}).concat('abc');//Report an error
[Note] Since the array also has a concat() method, the parameters will determine how to convert according to whether the parameter that appears first is an array or a string.
'1,2,3,'.concat([4,5]);//'1,2,3,4,5'
[1,2,3].concat(',4,5');//[1, 2, 3, ",4,5"]
【Plus operator (+)】
Although concat() is a method specifically used to splice strings, more use of the plus operator (+) in practice. Using the plus operator is often simpler than concat()
var stringValue = 'hello ';console.log(stringValue.concat('world','!'));//'hello world!'console.log(stringValue + 'world' + '!');//'hello world!'[Note] String stitching is performed when one of the operands is a string, or if the object is converted to a string
1 + 2;//3'1' + 2;//'12'var o = {valueOf:function(){return '1';}};o + 2;//'12'var o = {valueOf:function(){return 1;}};o + 2;//3Create substrings
There are three methods of creating substrings: slice(), substr() and substring().
【slice()】
The slice(start, end) method requires two parameters start and end, which returns a substring in this string from the character at the start position to (but does not contain) the character at the end position; if end is undefined or does not exist, it returns all characters from the start position to the end of the string
If start is a negative number, start = max(length + start,0)
If end is a negative number, end = max(length + end,0)
Start and end cannot exchange positions
var stringValue = 'hello world';console.log(stringValue.slice());//'hello world'console.log(stringValue.slice(2));//'llo world'console.log(stringValue.slice(2,undefined));//'llo world'console.log(stringValue.slice(2,-5));//'llo 'console.log(stringValue.slice(2,-20));//''console.log(stringValue.slice(20));//''console.log(stringValue.slice(-2,2));//''console.log(stringValue.slice(-2,-20));//'' console.log(stringValue.slice(-2,20));//'ld'console.log(stringValue.slice(-20,2));//'he'console.log(stringValue.slice(-20,-2));//'hello wor'
The slice() method involves implicit type conversion of Number() transformation function. When start is converted to NaN, it is equivalent to start = 0; when end is converted to NaN (except end is undefined), an empty string is output
var stringValue = 'hello world';console.log(stringValue.slice(NaN));//'hello world'console.log(stringValue.slice(0,NaN));//''console.log(stringValue.slice(true,[3]));//'el'console.log(stringValue.slice(null,undefined));//'hello world'console.log(stringValue.slice({}));//'hello world'console.log(stringValue.slice('2',[5]));//'llo'【substring()】
Substring(start, end) method requires two parameters start and end, which returns a substring in this string from the character at the start position to (but does not contain) the character at the end position; if end is undefined or does not exist, it returns all characters from the start position to the end of the string
If either parameter is NaN or negative, it is replaced by 0
If any parameter is greater than the string length, it is replaced by the string length
If start is greater than end, then their values are swapped
var stringValue = 'hello world';console.log(stringValue.substring());//'hello world'console.log(stringValue.substring(2));//'llo world'console.log(stringValue.substring(2,undefined));//'llo world'console.log(stringValue.substring(20));//''console.log(stringValue.substring(-2,2));//'he'console.log(stringValue.substring(NaN,2));//'he'console.log(stringValue.substring(-2,20));//'he'console.log(stringValue.substring(-2,20));//'hello world'console.log(stringValue.substring(3,2));//'l'console.log(stringValue.substring(3,NaN));//'hel'console.log(stringValue.substring(-20,2));//'he'console.log(stringValue.substring(-20,-2));//''''''
Similarly, the substring() method also involves implicit type conversion of Number() transformation function
var stringValue = 'hello world';console.log(stringValue.substring(true,[3]));//'el'console.log(stringValue.substring(null,undefined));//'hello world'console.log(stringValue.substring(null,undefined));//'hello world'console.log(stringValue.substring({}));//'hello world'console.log(stringValue.substring('2',[5]));//'llo'【substr()】
The substr(start, end) method requires two parameters start and end. End represents the number of characters in the returned substring; this method returns a substring of end characters starting from the character at the start position in this string; if end is undefined or does not exist, it returns all characters from the start position to the end of the string
If start is a negative number, start = max(length + start,0)
If start is NaN, it is equivalent to start = 0
If end is a negative number or NaN, end = 0, thus an empty string is returned
Start and end cannot exchange positions
[Note] This method is not the ECMAScript standard and has been deprecated
[Note] IE8-The browser has a problem with handling the situation where negative values are passed to substr(), it returns the original string
var stringValue = 'hello world';console.log(stringValue.substr());//'hello world'console.log(stringValue.substr(2));//'llo world'console.log(stringValue.substr(2,undefined));//'llo world'console.log(stringValue.substr(2,NaN));//''console.log(stringValue.substr(NaN,2));//'he'console.log(stringValue.substr(20));//''console.log(stringValue.substr(-2,3));//'ld'console.log(stringValue.substr(-2,20));//'ld'console.log(stringValue.substr(-20,2));//'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' console.log(stringValue.substr(2,5));//llo w
Similarly, the substr() method also involves implicit type conversion of Number() transformation function
var stringValue = 'hello world';console.log(stringValue.substr(true,[3]));//'el'console.log(stringValue.substr(null,undefined));//'hello world'console.log(stringValue.substr({}));//'hello world'console.log(stringValue.substr('2',[5]));//'llo w'String position
There are two ways to find the location of substrings from strings: indexOf() and lastIndexOf()
【indexOf()】
IndexOf(searchString, start) method receives two parameters: searchString and start, returning the location where the searchString first appears, and if it is not found, it returns -1
This method implicitly calls the String() transformation function to convert searchString non-string value to string; implicitly calls the Number() transformation function to convert start non-numeric value (except undefined) to numeric value to numeric value
searchString represents the substring to be searched; start represents the starting position of the search. If the parameter is ignored or the parameter is undefined, NaN or negative, start = 0
var string = 'hello world world';console.log(string.indexOf('ld'));//9console.log(string.indexOf('ld',undefined));//9console.log(string.indexOf('ld',NaN));//9console.log(string.indexOf('ld',-1));//9console.log(string.indexOf('ld',-1));//9console.log(string.indexOf('ld',-1));//9console.log(string.indexOf('ld',-1));//9console.log(string.indexOf('ld',-1));//9console.log(string.indexOf('ld',-1));//9 console.log(string.indexOf('ld',10));//15console.log(string.indexOf('ld',[10]));//15console.log(string.indexOf('true',[10]));//-1console.log(string.indexOf(false,[10]));//-1console.log(string.indexOf(false,[10]));//-1【lastIndexOf()】
The lastIndexOf(searchString, start) method receives two parameters: searchString and start, and returns the last time the searchString appears. If it is not found, it returns -1
Similarly, this method implicitly calls the String() transformation function to convert searchString non-string values into strings; implicitly calls the Number() transformation function to convert start non-numeric values (except undefined) to numeric values.
searchString represents the substring to be searched; start represents the starting position of the search. If the parameter is ignored or the parameter is undefined or NaN, start = length - 1
[Note] Unlike the indexOf() method, if start is negative, the method returns -1
var string = 'hello world world';console.log(string.indexOf('ld'));//9console.log(string.indexOf('ld',undefined));//9console.log(string.indexOf('ld',NaN));//9console.log(string.indexOf('ld',-1));//-1 console.log(string.indexOf('ld',10));//15console.log(string.indexOf('ld',[10]));//15console.log(string.indexOf('true',[10]));//-1console.log(string.indexOf(false,[10]));//-1console.log(string.indexOf(false,[10]));//-1【tips】Find out all substrings that meet the criteria of the string
All matching substrings can be found by looping to call indexOf() or lastIndexOf()
function allIndexOf(str,value){var result = [];var pos = str.indexOf(value); while(pos > -1){result.push(pos);pos = str.indexOf(value,pos+value.length);}return result;}console.log(allIndexOf('hellhellhellhell','ll'));//[2,7,12]【trim()】
ECMAScript5 defines the trim() method for all strings. This method creates a copy of the string, deletes all blank characters in the prefix and suffix, and returns the result
Since the trim() method returns a copy of the string, the prefix and suffix spaces in the original string will remain unchanged
[Note] IE8-Browser does not support
var string = ' hello world ';console.log(string.trim());//' hello world'console.log(string);//' hello world '
Whitespace characters include not only spaces, but also tab characters (/t), line breaks (/n) and carriage return characters (/r)
'/r/nabc /t'.trim() // 'abc'
In addition, firefox, safari, and webkit also support non-standard trimRight() for deleting whitespace characters at the end of strings
var string = ' hello world ';console.log(string.trimRight());//' hello world';
【tips】Use trim() to determine whether the entered character is empty
if(usename.trim().length){alert('correct');}else{alert('error');}【tips】Simulate trim() with regular expression
function fnTrim(str){return str.replace(/^/s+|/s+$/,'')} console.log(fnTrim(' hello world '));//'hello world'Case conversion
There are four methods involved in string case conversion in ECMAScript: toLowerCase(), toLocaleLowerCase(), toUpperCase(), and toLocaleUpperCase()
toLowerCase() and toUpperCase() are two classic methods, borrowed from the same name method in java.lang.String. The toLocaleLowerCase() and toLocaleUpperCase() methods are implemented for specific regions. For some regions, the method for regions is the same as the results obtained by their general methods. However, a few languages (such as Turkish) will apply special rules for Unicode case conversion. At this time, the method for regions must be used to ensure the correct conversion is achieved.
【toUpperCase()】
toUpperCase() method converts string to uppercase
【toLowerCase()】
toLowerCase() method converts string to lowercase
【toLocaleUpperCase()】
toLocaleUpperCase() method converts string to uppercase (for region)
【toLocaleLowerCase()】
toLocaleLowerCase() method converts string to lowercase (for region)
[Note] It is safer to use a region-specific method without knowing which locale your code will run in.
var string = 'Hello World';console.log(string.toLowerCase());//hello worldconsole.log(string.toLocaleLowerCase());//hello worldconsole.log(string.toUpperCase());//HELLO WORLDconsole.log(string.toLocaleUpperCase());//HELLO WORLD
These 4 methods do not support String() implicit type conversion, only support string types
(true).toLowerCase();//Report an error
(2).toLocaleLowerCase();//Report an error
({}).toUpperCase();//Report an error
([]).toLocaleUpperCase();// Report an error
[Note] The case conversion method can be used continuously
var string = 'Hello World';console.log((string.toUpperCase()).toLowerCase());//hello world
【localeCompare()】
The localeCompare() method is used to compare two strings, following the following rules
[1] If the string should be ranked before the string parameter in the alphabet, a negative number is returned (mostly -1)
【2】If the string is equal to the string parameter, return 0
【3】If the string should be placed after the string parameter in the alphabet, a positive number will be returned (in most cases 1)
var stringValue = 'yellow';console.log(stringValue.localeCompare('brick'));//1 'y'> 'b'console.log(stringValue.localeCompare('yellow'));//0 'yellow' == 'yellow'console.log(stringValue.localeCompare('zoo'));//-1 'yellow' < 'zoo'[Note] Although capital letters in the alphabet are in front of lowercase letters, so capital letters < lowercase letters. But the localeCompare() method will take into account the sorting situation of natural language and rank 'B' in front of 'a'
console.log('B'.localeCompare('a'));//1console.log('B' > 'a');//falseconsole.log('b'.localeCompare('a'));//1console.log('b' > 'a');//trueThe above is the relevant knowledge about the detailed explanation of the String string type of the Javascript type system introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!