自學day8 js的字元串

来源:https://www.cnblogs.com/sml-ylz/archive/2023/11/29/17865043.html
-Advertisement-
Play Games

typora-copy-images-to: media ES5和字元串 一、ES5的語法 js在產生的時候，年代比較早，當時的web需求比較少，所以剛開始的js功能比較少，語法沒有特別嚴謹。隨著時代的發展和web應用的普及，js需要更多的功能，以及更嚴謹的語法，所以，js會有版本的升級。第一版的j ...


typora-copy-images-to: media

ES5和字元串

一、ES5的語法

js在產生的時候，年代比較早，當時的web需求比較少，所以剛開始的js功能比較少，語法沒有特別嚴謹。隨著時代的發展和web應用的普及，js需要更多的功能，以及更嚴謹的語法，所以，js會有版本的升級。第一版的js是ECMA一開始統一了標準以後的版本。我們現在的所使用的語法，大多是ECMAScript版本3的語法，簡稱es3。到目前為止，已經有了es7,8,9,甚至es10 的版本了。近幾年，基本每年都會有新的版本更新。

每個版本的更新，都需要瀏覽器支持才能運行，但瀏覽器不會在js更新之後，立馬更新。所以有的版本出來之後，需要在很長時間之後，瀏覽器才會相容他。到目前為止，我們公認，es5是相容性最好的版本。

es5比起我們所正在使用的es3，語法沒有什麼變化，增加了一個嚴格模式，還有一些數組的方法。

1、嚴格模式

1.1、概念

由於js的作用域和隱式聲明變數等語法會造成很多預想不到的錯誤，所以ES5中新增了一個嚴格模式的語法，用於嚴格規範代碼的書寫。

1.2、語法

使用語法：

"use strict";

使用說明：

  1. 要放在代碼的最前面，也就是在script標簽中的第一行或者某個函數中的第一行，否則會失效
  2. 嚴格模式可以規範當前script標簽或者當前函數中的代碼，不能規範別的script標簽中的代碼和別的函數

1.3、作用

  1. 不允許隱式聲明變數
  2. 禁止函數中的形參重名
  3. 禁止函數中的this代表window

1.4、好處

  1. 可以讓代碼更加規範
  2. 可以讓代碼運行起來更快，提高運行效率

二、字元串

1、字元串的重新認識

字元串定義：

var str = '';
var str = "";

1.1、字元串長度

字元串中字元的個數：字元串.length

1.2、字元串取下標

字元串中獲取某個字元的時候，可以根據下標來獲取：

var str = "abcdef";
var s = str[1]
console.log(s) // 'b'
var s1 = str[0] 
console.log(s1) // 'a'

所以字元串也是可以進行遍歷的：

var str = "abcdef";
for(var i=0;i<str.length;i++){
    console.log(str[i],i)
}

1.3、字元串只讀

那字元串是否也可以像數組一樣，通過下標更改其中的某個字元呢？

var str = 'abcdef';
str[str.length] = 'g'

str[0] = 'g'
console.log(str) // abcdef

操作後，字元串並沒有新增和更改。

因為字元串是只讀數據，只能讀，不能增刪改。

字元串可以進行比較，我們在前面的時候，有過這樣的比較：

console.log('12'>'5') // false
console.log('12'<'5') // true

字元串可以比較，但是規則跟數字比較是不一樣的。

字元串比較的規則是逐字元進行比較，大小由阿斯克碼來決定。

2、阿斯克碼

2.1、概念

電腦內部只能識別2進位數據，不能識別字母等字元。

為了能讓電腦識別字元，科學家制定了一個對照表，當輸入一段2進位指令的時候，就能顯示成某個字元。

這個對照表叫做阿斯克碼表，其中包含了128個常用字元跟2進位的對照關係。

通過阿斯克碼表，我們可以得出一些字元串比較的規律：

  1. 字母比數字大
  2. 小寫字母比大寫字母大
  3. 字母越靠後越大

2.2、字元串比較

字元串能比較大小，中文漢字也是字元串，中文漢字也能比較大小：

console.log('我'>'你') // true
console.log('你'>'我') // false

中文漢字的大小由unicode來決定。

阿斯克碼總共128個，包含符號、大小寫英文字母、數字。阿斯克碼是由美國人創建的，所以對於英文的支持非常好。後來隨著電腦的普及，各個國家在使用電腦的時候，沒辦法使用本國文字，這樣用起來非常困難。所以眾多國家的科學家一起制定了一個更大的對照表，包含各個國家的文字元號，所以稱之為萬國碼，也叫作unicode。

其實unicode就是更大的阿斯克碼。

3、字元串方法

  • charCodeAt - 根據指定下標獲取對應的字元的阿斯克碼

    var str = 'abcdef';
// 獲取下標為3的字元的阿斯克碼
var res = str.charCodeAt(0); // 參數為指定的下標
console.log(res); // 97

  • String.fromCharCode - 根據指定的阿斯克碼得到對應的字元

    // 獲取98對應的字元
var res = String.fromCharCode(98); // 參數為指定的阿斯克碼
console.log(res); // b

  • indexOf - 查找字元或子字元串在大字元串中第一次出現的位置

    var str = 'i love you';
// 找到o字元在str中第一次出現的位置
var s = str.indexOf('o'); // 參數為要查找的字元
console.log(s); // 3

var s = str.indexOf('o',4); // 參數2為開始查找的下標
console.log(s) // 8

var s = str.indexOf('a') // 查找a字元在字元串中第一次出現的下標
console.log(s) // -1 - 找不到就返回-1

  • lastIndexOf - 查找字元在字元串中最後一次出現的下標

    var str = 'i love you';
// 找到o字元在str中最後一次出現的位置
var s = str.lastIndexOf('o');
console.log(s); // 8

var s = str.lastIndexOf('o',7) // 將下標7當做字元串末尾，查找字元o在字元串中最後一次出現的下標
console.log(s) // 3

var s = str.lastIndexOf('a')
console.log(s) // -1 - 找不到就返回-1

  • slice - 截取字元串

    var str = 'abcdef';
// 從下標1截取到下標4
var s = str.slice(1,4) // 參數1是開始截取的下標，參數2是截取的結束下標
console.log(s) // bcd - 結果中不包含結束下標對應的字元

var s = str.slice(1) // 省略第二個參數，預設能截取到字元串末尾
console.log(s) // bcdef

var s = str.slice(-3,-1) // 下標可以使用負數表示，-3表示倒數第3個字元，-1表示倒數第1個字元
console.log(s) // def

var s = str.slice(-1,-3) // 如果開始下標比結束下標大，會截取到空
console.log(s) // ''

  • split - 將字元串使用指定的分隔符分割為數組

    var str = 'a-b-c-d';
var arr = str.split('-') // 參數為分隔符，使用-將字元串分割為一個數組
console.log(arr) // ['a','b','c','d']

var arr = str.split('-',3) // 參數2表示數組中要保留前幾個元素
console.log(arr) // ['a','b','c']

var str = 'abcd';
var arr = str.split() // 省略了分隔符，預設就不分割，將整個字元串當做一個元素放在數組中
console.log(arr) // ['abcd']

var arr = str.split('')
console.log(arr) // ["a", "b", "c", "d"]

  • replace - 使用新字元串將字元串中某一部分替換掉

    var str = '你的頭髮還好嗎？';
str = str.replace('頭髮','眉毛') // 參數1是被替換的字元串中的部分，參數2是新內容
console.log(str) // '你的眉毛還好嗎？'

str = str.replace('','哈哈') // 參數1為空，就會將新內容添加到原字元串的最前面
console.log(str) // '哈哈你的眉毛還好嗎？'

  • trim - 去除字元串兩端空白

    var str = '    aaa          ';
str = str.trim()
console.log(str) // 'aaa' - 左右兩端的空白被去掉了

str = str.trimLeft() // 去除左邊的空白
console.log(str) // 'aaa          '

str = str.trimRight() // 去除右邊的空白
console.log(str) // '    aaa'

  • toUpperCase - 將字元串中字母轉為大寫

    var str = 'i love you';
str = str.toUpperCase()
console.log(str) // 'I LOVE YOU'

  • toLowerCase - 將字元串中字母轉為小寫

    var str = 'I LOVE YOU';
str = str.toLowerCase()
console.log(str) // 'i love you'

  • substr - 截取字元串

    var str = 'abcdef';
str = str.substr(1,3) // 參數1是開始截取的下標，參數2是截取的字元串長度
console.log(str) // bcd

str = str.substr(1) // 省略參數2預設截取到字元串末尾
console.log(str) // bcdef

str = str.substr(-4,2) // 開始截取的下標可以用負數表示
console.log(str) // 'cd'

str = str.substr(1,20) // 長度超出最大下標，就相當於省略了參數2
console.log(str) // bcdef

  • substring - 截取字元串

    var str = 'abcdef'
str = str.substring(1,4) // 參數1是開始截取的下標，參數2是結束下標
console.log(str) // bcd - 結果不包含結束下標對應的字元

str = str.substring(1) // 省略參數2，預設截取到末尾
console.log(str) // bcdef

str = str.substring(1,1) // 開始下標和結束下標相等就截取到空字元串
console.log(str) // ''

str = str.substring(4,1) // 開始下標大於結束下標，就先交換兩個參數位置，然後再截取
console.log(str) // 'bcd'

str = str.substring(-5,4) // 開始下標或結束下標是負數，就先替換為0，然後開始截取
console.log(str) // abcd

  • startsWith - 判斷字元串是否以某個字元或小字元串開頭

    var str = 'abcdef'
var bool1 = str.startsWith('a') // true
var bool2 = str.startsWith('ab') // true
var bool3 = str.startsWith('aa') // false

  • endsWith - 判斷字元串是否以某個字元或小字元串結尾

    var str = 'abcdef'
var bool1 = str.endsWith ('f') // true
var bool2 = str.endsWith ('ef') // true
var bool3 = str.endsWith ('ff') // false

  • includes - 判斷字元串中是否包含某個字元

    var str = 'abcdef'
var bool1 = str.endsWith ('cd') // true
var bool2 = str.endsWith ('f') // true
var bool3 = str.endsWith ('acd') // false

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • WebSocket 是什麼原理？為什麼可以實現持久連接？
    WebSocket 是一種用於實現持久連接的通信協議，它的原理和工作方式相對複雜，但我們可以嘗試以儘可能簡單和清晰的方式來解釋它。 WebSocket 的原理 在理解 WebSocket 的工作原理之前，我們首先要瞭解 HTTP 協議的短連接性質。在傳統的 HTTP 通信中，客戶端發送一個請求到服務 ...
  • [TS手冊學習] 02_類型收窄 Narrowing
    一個變數如果聲明為聯合類型，而後續操作需要針對其具體的單一類型做不同處理，這個過程就叫做類型收窄（`Narrowing`） ...
  • Vite4+Typescript+Vue3+Pinia 從零搭建(5) - 路由router
    項目代碼同步至碼雲 weiz-vue3-template Vue Router 是 Vue.js 的官方路由。它與 Vue.js 核心深度集成，讓用 Vue.js 構建單頁應用變得輕而易舉。 1. 安裝 npm i vue-router@4 2. 集成 1. 新建兩頁面進行示例 在src/view下 ...
  • 記錄--閉包，沙箱，防抖節流，函數柯里化，數據劫持......
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 函數創建與定義的過程 函數定義階段 在堆記憶體中開闢一段空間 把函數體內的代碼一模一樣的存儲在這段空間內 把空間賦值給棧記憶體的變數中 函數調用階段 按照變數名內的存儲地址找到堆記憶體中對應的存儲空間 在調用棧中開闢一個新的函數執行空間 在執行 ...
  • [TS手冊學習] 01_基礎、常見類型與概念
    TS官方Handbook: TypeScript: Handbook - The TypeScript Handbook (typescriptlang.org) 基礎 相關概念 運行時錯誤：JS 的大多數錯誤都只能在運行的過程中被髮現。 靜態類型系統：TS 可以在運行代碼之前發現錯誤。 非異常失敗 ...
  • React 受控和非受控組件
    無論你做什麼，都要相信自己可以做到，因為你的潛力是無限的。 把父組件的狀態變成屬性傳遞給子組件，子組件接受這個屬性，聽命於父組件。這個子組件就是叫做受控組件。在受控與非受控組件有兩種理解方案，第一：狹義上的受控與非受控，就是我們在表單中的受控與非受控組件。第二：廣義上的受控與非受控組件，就是 Rea ...
  • React 中 Ref 引用
    不要因為別人的評價而改變自己的想法，因為你的生活是你自己的。 1. React 中 Ref 的應用 1.1 給標簽設置 ref 給標簽設置 ref，ref="username"， 通過 this.refs.username 可以獲取引用的標簽，ref 可以獲取到應用的真實 Dom 節點。但是 thi ...
  • Taro：高性能小程式的最佳實踐
    作為一個開放式的跨端跨框架解決方案，Taro 在大量的小程式和 H5 應用中得到了廣泛應用。本文將為大家提供一些小程式開發的最佳實踐，幫助大家最大程度地提升小程式應用的性能表現。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類