Home >Web Front-end >JS Tutorial >Strings -- Manipulating the Immutable.
In the beginning, we learn about data types. Simple and Complex. Primitive and abstract.
Primitive is inherently simple. Two categories are reserved for the alphanumeric characters we are introduced to as children, and the third would not be out of place on a grade school worksheet.
This permanence is the defining difference between primitive and complex data. Immutability the explicit characteristic of simple data.
So how does one one manipulate the immutable?
JavaScript Methods are “built in” functions that are associated with specific data types. When first learning the basic methods, I wasn't sure if (or when) syntax required an assignment operator.
The method's manner of data manipulation dictates the presence of an assignment. Destructive methods (? =) manipulate data in place, while non-destructive (✅ =) create new values.
Simply put, all string methods are returning a new variable or data value. The original string remains immutable. They all will have assignment operators and return values.
.length
returns the length of a string
var str = ‘simple’; var len = str.length; console.log(len); // logs 6 to the console console.log(str); // logs 'simple'
.concat()
joins two or more strings
var str1 = 'simple simon'; var str2 = 'pie man'; // string to be concatenated takes joiners var combo = str1.concat(' met a ', str2); console.log(combo) // 'simple simon met a pie man'
.split
returns an array
var str = 'A,B,C' // takes in optional separator var arr = str.split(',') console.log(arr)// ["A","B","C"] // empty quotes returns each value as an index var arr = str.split('') // returns["A",",","B",",","C"] // no separator returns whole string at [0] var arr = str.split() // ["A,B,C"]
Extraction Methods
return a specified portion of a string
.slice
var str = 'simple simon' // takes a start and end parameter (non-inclusive) var portion = str.slice(0, 6) // start at 0 index, stop before 6 console.log(portion) // logs 'simple' to the console // returns empty if start > end var portion = str.slice(3, 2) // start at 3 index, end before 2 console.log(portion) // logs '' to the console // negative numbers start count at the end of the string // lack of stop value indicates portion extends to end of string var portion = str.slice(-5) // start at 5th index from end console.log(portion) // logs 'simon' to the console
.substring
var str = 'simple simon' // like slice (start, end) but <0 is treated as 0 var portion = str.substring(-5) console.log(portion) // logs 'simple simon' to the console
.substr
var str = 'simple simon' // takes (start, length) // use in place of .slice when end < start var portion = str.substr(3, 2) // start at 3 index, take 2 characters console.log(portion) // logs 'pl' to the console // negative numbers start parameter like slice // negative length treated as 0 characters var portion = str.substr(-1, 1) // start at -1, return 1 character console.log(portion) // logs 'n' to the console var portion = str.substr(2, -5) // console.log(portion) // logs '' to the console
In JavaScript, manipulation is not an exact synonym for how we use it in regular communication. The change occurs because a new value is created, but the original data is retained.
Although seemingly simple at first, these methods become vital down the road. For example, when looping an array of strings, the methods used on each iteration will be those of strings, not of arrays. Like it's components, string manipulation is straight forward and valuable.
Image Credit
Eloquent JavaScript
The above is the detailed content of Strings -- Manipulating the Immutable.. For more information, please follow other related articles on the PHP Chinese website!