Nội dung bài viết
Video học lập trình mỗi ngày
Xử lý chuỗi trong javascript là một kỹ năng cơ bản cho những bạn mới bắt đầu học javascript. Vì String, Object, Array được sử dụng rất nhiều trong một ứng dụng javascript. Trong bài viết này, tôi sẽ liệt kệ ra nhiều method dành cho String. Hy vọng sẽ giúp bạn hiểu hơn về String javascript.
Giới thiệu về bài viết "Kỹ năng xử lý chuỗi trong Javascript" là một bài viết nằm trong Series "Nguyên tắc lập trình javascript" cho nên trước khi đọc bài viết này bạn nên chủ động quay về những bài trước và check theo thứ tự mà chúng tôi đã sắp xếp trong mục đích của mình sao cho bạn có thể đi từng bước.
1 - Nguyên tắc đặt tên trong lập trình
2 - Kỹ năng xử lý chuỗi trong Javascript
3 - Kỹ năng làm việc với Array trong Javascript
4 - Kỹ năng làm việc với Object trong Javascript
5 - Kỹ năng làm việc với Function trong Javascript
6 - Kỹ năng làm việc với Module trong Javascript
7 - Kỹ năng làm việc với Loop trong Javascript
8 - Kỹ năng làm việc với Callback trong Javascript
9 - Kỹ năng làm việc với Promise trong Javascript
10 - Kỹ năng làm việc với Async-await trong Javascript
11 - Còn nhiều nữa...
String trong javascript
Để nói về String thì javascript có vẻ như ưu tiên rất nhiều các method để xử lý chuỗi, và các nhà phát triển javascript không những cải tiến từ trước ES6, cho đến bây giờ tới tận ES2020 mà họ vẫn cập nhật những method dành cho String. Bạn có thể lượt xem những chức năng từ ES6 tới ES2020 để hiểu thêm nhiều nhiều nhất có thể. Còn ở đây tôi sẽ liệt kê ra những phương thức mà tôi sẽ giới thiệu cho các bạn, tất nhiên là tôi không thể nói rõ và kỹ nhất về tất cả. Do đó nếu bạn cũng tìm hiểu và đọc thêm những kiến thức này thì có lẽ rất tốt hơn cho bạn đấy!
Để có thể nắm tốt nhất thì bạn nên tìm hiểu về những method String trong javascript sau đây:
- charAt()
- charCodeAt()
- concat()
- slice()
- substr()
- substring()
- indexOf()
- lastIndexOf()
- toLowerCase()
- toUpperCase()
- match()
- search()
- replace()
- split()
- trim()
- localeCompare()
- formCharCode()
- valueOf()
- includes() ES6
- startsWith() ES6
- endsWith() ES6
- repeat() ES6
- padStart() ES6
- padEnd()
Còn đây là những lời khuyên đơn giản nhưng sẽ có ích rất nhiều đấy, về cách đặt tên biến thì chúng ta đã nói ở phần 1 của series này rồi, scroll lên để đọc nhé. Nhưng việc sử dụng dáu nháy đơn hay kép cũng là một vấn đề đấy. Ví dụ Sử dụng dấu ngoặc đơn thay vì dấu ngoặc kép
// bad const name = "anonystick.com" // good const name = 'anonystick.com'
Để đây xem có ai hỏi không?? kakaka Thay vì dấu + thì chúng ta nên sử dụng Template literals
function sayHi(name) {
return 'How are you, ' + name + '?'
}
// good
function sayHi(name) {
return `How are you, ${name}?`
}charAt javascript
Trả về ký tự ở vị trí đã chỉ định theo index. Ví dụ vị trí đầu tiên là 0, tiếp theo là 1, 2...
var str = "hello world" var str1 = str.charAt(4) var str2 = str.charAt(10) console.log(str1) //o console.log(str2)
charCodeAt javascript
Trả về mã hóa unicode của ký tự tại vị trí đăng ký đã chỉ định, giá trị trả về này là một số nguyên trong khoảng 0-65535 với UTF-16
var str = "hello world" var str1 = str.charCode(1) var str2=str.charCodeAt(-2); //NaN console.log(str1) //101
concat javascript
Tôi nghĩ method này thì quá quen thuộc với chúng ta rồi, chắc không có gì để nói về method này nữa. Nối nhiều chuỗi thành một chuỗi. Mà theo tôi nếu cho nỗi chuỗi thì đừng có dùng thằng này mà dùng luôn toán từ "+" cho khoẻ. Vi dụ
var str1 = "a"; var str2 = "b"; var str3 = "c"; console.log(str1.concat(str2,str3)) // "abc"
Thay vì sử dụng concat() thì chúng ta sử dụng toán tử "+" cho nhanh.
var str = "d"; var str1 = "e"; var str2 = "f"; var str3 = str+str1+str2; console.log(str3) // "def"
slice javascript
Sử dụng method này có hai hoặc lớn nhiều mục địch, ngoài dùng slice để cắt chuổi với cú pháp slice.(chỉ mục bắt đầu [, chỉ mục kết thúc])
var str = 'abcdefghij';
console.log('(1, 2): ' + str.slice(1, 2)); // '(1, 2): b'
console.log('(-3, 2): ' + str.slice(-3, 2)); // '(-3, 2): '
console.log('(-3, 9): ' + str.slice(-3, 9)); // '(-3, 9): hi'
console.log('(-3): ' + str.slice(-3)); // '(-3): hij'
console.log('(-3，-1): ' + str.slice(-3,-1)); // '(-3，-1): hi'
console.log('(0，-1): ' + str.slice(0, -1)); // '(0，-1): abcdefghi'
console.log('(1): ' + str.slice(1)); // '(1): bcdefghij'
console.log('(-20, 2): ' + str.slice(-20, 2)); // '(-20, 2): ab'
console.log('(20): ' + str.slice(20)); // '(20): '
console.log('(20, 2): ' + str.slice(20, 2)); // '(20, 2): 'Ngoài ra, các devjs cao hơn họ có thể sử dụng method này để dùng để copy một array mà không làm cho array gốc bị thay đổi, hay thuật ngữ trong lập trình là shallow copy và deep copy. Vi dụ:
let arr1 = [1 , 2 , 3 , "hello" , "world"]; let arr2 = arr1.slice(0); console.log(arr2); // [1 , 2 , 3 , "hello" , "world"];
substr javascript
Cũng giống như việc sử dụng slice() thì substr() cũng có cùng chức năng là cắt chuỗi nhưng khác nhau về cách dùng. Cú pháp đó là str.substr(bắt đầu, [chiều dài]) Cũng lấy ví dụ như mục slice() thì khi sử dụng ta có substr()
var str = 'abcdefghij';
console.log('(1, 2): ' + str.substr(1, 2)); // '(1, 2): bc'
console.log('(-3, 2): ' + str.substr(-3, 2)); // '(-3, 2): hi'
console.log('(-3): ' + str.substr(-3)); // '(-3): hij'
console.log('(1): ' + str.substr(1)); // '(1): bcdefghij'
console.log('(-20, 2): ' + str.substr(-20, 2)); // '(-20, 2): ab'
console.log('(20, 2): ' + str.substr(20, 2)); // '(20, 2): 'substring javascript
Phướng thức này cũng giống như hai method vừa mới học xong đó là slice() và substr() đó là sử dụng để cắt chuỗi con trong chuỗi chính. Nhưng cách sử dụng khác nhau đó là việc sử dụng substring() là trích xuất các chuỗi con được chỉ định cho trước với hai index. Cú pháp như sau : str.substring(indexStart, indexEnd) Trong đó indexStart, và indexEnd là hai chỉ số để cắt. Lấy ví dụ trên của slice() ta có thể thấy rõ hơn thông qua ví dụ dưới đây.
var str = 'abcdefghij';
console.log('(1, 3): ' + str.substring(1, 3)); // '(1, 2): b'
console.log('(1, 1): ' + str.substring(1, 1)); // '(1, 1): '
console.log('(-3, 2): ' + str.substring(-3, 2)); // '(-3, 2): ab'
console.log('(-3): ' + str.substring(-3)); // '(-3): abcdefghij'
console.log('(1): ' + str.substring(1)); // '(1): bcdefghij'
console.log('(-20, 2): ' + str.substring(-20, 2)); // '(-20, 2): ab'
console.log('(2, 20): ' + str.substring(2, 20)); // '(2, 20): cdefghij'
console.log('(20, 2): ' + str.substring(20, 2)); // '(20, 2): cdefghij'Thật ra giữa slice(), substr() và subString() nó khác nhau, chính vì vậy bạn cũng nên tự tìm hiểu thêm. Nếu có thời gian thì tôi sẽ viết chi tiết thêm về điều này.
indexOf javascript
Tiếp tục là phương thức tiếp theo mà chúng ta thường thấy và hay sử dụng nhiều nhất để sử dụng trong nhiều tình huống lập trình. Chính vì method này được nói nhiều rồi cho nên, tôi xin phép không giải thích thêm nữa mà bạn có thể đọc thêm tại đây ngay sau khi bài viết này kết thúc. Ở đó bạn có thể học thêm về findindex() và indexof() https://anonystick.com/blog-developer/findindex-vs-indexof-javascript-2020042368650542 Ví dụ về indexOf()
"ABC".indexOf("A") // 0 tìm thấy A
"ABC".indexOf("e") // -1 không tìm thấy e
"ABC".indexOf("AB") // 0 thấy luônlastIndexOf javascript
Phương thức String lastIndexOf() trong JavaScript trả về chỉ mục trong đối tượng chuỗi đang gọi của sự xảy ra cuối của giá trị đã cho, bắt đầu tìm kiếm tại fromIndex hoặc -1 nếu giá trị không được tìm thấy. Cú pháp sẽ như sau: string.lastIndexOf(searchValue[, fromIndex])
const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';
const searchTerm = 'dog';
console.log(`The index of the first "${searchTerm}" from the end is ${paragraph.lastIndexOf(searchTerm)}`);
// expected output: "The index of the first "dog" from the end is 52"Ngoài ra các bạn nên tìm hiểu thêm về những method còn lại mà tôi đã gợi ý trước bài viết đấy. Tự nghiên cứu, tự học thêm và kết hợp đọc những bài viết như thế này, một ngày bạn sẽ thấy điều khác biệt đấy. Ok, tạm vậy thôi, bài viết sau thì chúng ta sẽ tìm hiểu về kỹ năng làm việc với Object trong javascript.
