Elm - คู่มือฉบับย่อ

Elm เป็นภาษาโปรแกรมที่ใช้งานได้ ได้รับการออกแบบโดย Evan Czaplicki ในปี 2555

Elm ใช้สำหรับออกแบบส่วนหน้าของเว็บแอปพลิเคชันโดยเฉพาะ

Elm คอมไพล์เป็น JavaScript และทำงานในเบราว์เซอร์ รวดเร็วทดสอบได้บำรุงรักษาได้และไม่มีข้อยกเว้นรันไทม์

การใช้งานจริงบางอย่างของแพลตฟอร์มการเขียนโปรแกรม Elm ได้แก่ -

  • Games
  • Graphics
  • แอปพลิเคชั่นหน้าเดียว

ทำไม Elm

Elm ช่วยขจัดปัญหาทั่วไปส่วนใหญ่ที่นักพัฒนาส่วนหน้าต้องเผชิญ ซึ่งรวมถึง -

ไม่มีข้อยกเว้นรันไทม์

Elm เป็นภาษาที่พิมพ์แบบคงที่ ข้อผิดพลาดที่เป็นไปได้ทั้งหมดได้รับการตรวจสอบและแก้ไขในเวลาคอมไพล์ ทำให้ไม่มีข้อยกเว้นรันไทม์

ข้อความแสดงข้อผิดพลาดที่เป็นมิตรกับนักพัฒนา

ไม่เหมือนกับภาษาโปรแกรมอื่น ๆ คอมไพเลอร์ของ Elm ได้รับการออกแบบมาเพื่อให้ข้อความแสดงข้อผิดพลาดที่เฉพาะเจาะจงและเป็นมิตรกับนักพัฒนาในเวลาคอมไพล์ ข้อความแสดงข้อผิดพลาดยังมีคำแนะนำเช่นลิงก์ไปยังเอกสารการออกแบบที่แนะนำ

ง่ายต่อการทดสอบ

แต่ละฟังก์ชันของ Elm สามารถทดสอบโดยแยกจากฟังก์ชันอื่น ๆ ทั้งหมดได้ ทำให้โปรแกรมที่เขียนด้วย Elm สามารถทดสอบได้อย่างง่ายดาย

การกำหนดเวอร์ชันความหมายอัตโนมัติ

Elm บังคับใช้การกำหนดเวอร์ชันความหมายของแพ็คเกจโดยอัตโนมัติ สิ่งนี้ช่วยให้มั่นใจได้ว่าการเปลี่ยนแปลงโปรแกรมแก้ไขจะไม่ขัดข้องกับแอปพลิเคชันที่ทำงานอยู่แล้ว

รหัสที่ใช้ซ้ำได้

ฟังก์ชัน Elm นั้นง่ายต่อการนำมาใช้ซ้ำเมื่อเทียบกับฟังก์ชันใน JavaScript, Python หรือ TypeScript

บทนี้กล่าวถึงขั้นตอนในการติดตั้ง Elm บนแพลตฟอร์ม Windows, Mac และ Linux

การตั้งค่าสภาพแวดล้อมท้องถิ่น

พิจารณาขั้นตอนที่แสดงด้านล่างเพื่อติดตั้ง Elm ในสภาพแวดล้อมท้องถิ่นของคุณ

Step 1 − Install node

เนื่องจาก elm ถูกคอมไพล์เป็น JavaScript เครื่องเป้าหมายควรมี nodeติดตั้ง โปรดดูหลักสูตร TutorialsPoint NodeJS สำหรับขั้นตอนในการตั้งค่าnode และ npm

การตั้งค่าโหนด

Step 2 − Install elm

ดำเนินการคำสั่งต่อไปนี้บนเทอร์มินัลเพื่อติดตั้ง elm โปรดทราบว่าเวอร์ชันเสถียรของ elm คือ 0.18 ในขณะที่เขียนหลักสูตรนี้

npm install -g [email protected]

หลังการติดตั้งให้ดำเนินการคำสั่งต่อไปนี้เพื่อตรวจสอบเวอร์ชันของ Elm

C:\Users\dell>elm --version
0.18.0

Step 2 − Install the Editor

สภาพแวดล้อมการพัฒนาที่ใช้ที่นี่คือ Visual Studio Code (แพลตฟอร์ม Windows)

Visual Studio Code เป็น IDE โอเพ่นซอร์สจาก Visual Studio พร้อมใช้งานสำหรับแพลตฟอร์ม Mac OS X, Linux และ Windows VSCode ได้ที่

การติดตั้งบน Windows

ในส่วนนี้เราจะพูดถึงขั้นตอนในการติดตั้ง Elm บน Windows

ดาวน์โหลด https://code.visualstudio.com/ สำหรับ Windows

ดับเบิลคลิกที่ VSCodeSetup.exe เพื่อเปิดขั้นตอนการตั้งค่า การดำเนินการนี้จะใช้เวลาเพียงหนึ่งนาที

คุณสามารถข้ามไปยังเส้นทางของไฟล์ได้โดยตรงโดยคลิกขวาที่ File → Open in command prompt ในทำนองเดียวกันตัวเลือกเปิดเผยใน Explorer จะแสดงไฟล์ใน File Explorer

การติดตั้งบน Mac OS X

คู่มือการติดตั้งเฉพาะ Mac OS X ของ Visual Studio Code มีอยู่ที่ การติดตั้ง VSCode-MAC

การติดตั้งบน Linux

คู่มือการติดตั้งเฉพาะ Linux ของ Visual Studio Code สามารถดูได้ที่ การติดตั้ง VSCode-Linux

Step 4 − Install the elm Extension

ติดตั้งส่วนขยาย elm ใน VSCode ดังที่แสดงด้านล่าง

Elm REPL

REPL ย่อมาจาก Read Eval Print Loop แสดงถึงสภาพแวดล้อมของคอมพิวเตอร์เช่นคอนโซล Windows หรือ Unix / Linux shell ที่ป้อนคำสั่งและระบบตอบสนองด้วยเอาต์พุตในโหมดโต้ตอบ

Elm มาพร้อมกับสภาพแวดล้อม REPL ดำเนินการดังต่อไปนี้ -

  • อ่าน - อ่านอินพุตของผู้ใช้แยกวิเคราะห์อินพุตเป็นโครงสร้างข้อมูลของเอล์มและเก็บไว้ในหน่วยความจำ

  • Eval - รับและประเมินโครงสร้างข้อมูล

  • พิมพ์ - พิมพ์ผลลัพธ์

  • วนซ้ำ - ลูปคำสั่งด้านบนจนกว่าผู้ใช้จะออก ใช้คำสั่ง: exit เพื่อออกจาก REPL และกลับไปที่เทอร์มินัล

ตัวอย่างง่ายๆในการเพิ่มตัวเลขสองตัวใน REPL แสดงไว้ด้านล่าง -

เปิดเทอร์มินัล VSCode และพิมพ์คำสั่ง elm REPL

เทอร์มินัล REPL รอให้ผู้ใช้ป้อนอินพุตบางอย่าง ป้อนนิพจน์ต่อไปนี้ 10 + 20 สภาพแวดล้อม REPL ประมวลผลอินพุตตามที่ระบุด้านล่าง -

  • อ่านหมายเลข 10 และ 20 จากผู้ใช้

  • ประเมินโดยใช้ตัวดำเนินการ +

  • พิมพ์ผลลัพธ์เป็น 30

  • ลูปสำหรับการป้อนข้อมูลผู้ใช้ถัดไป ที่นี่เราออกจากลูป

บทนี้กล่าวถึงวิธีการเขียนโปรแกรมอย่างง่ายใน elm

Step 1 − Create a directory HelloApp in VSCode

ตอนนี้สร้างไฟล์ - Hello.elm ในไดเรกทอรีนี้

แผนภาพด้านบนแสดงโฟลเดอร์โครงการ HelloApp และเทอร์มินัลเปิดใน VSCode

Step 2 − Install the necessary elm packages

ผู้จัดการแพคเกจในเอล์มเป็นเอล์มแพคเกจ ติดตั้งแพ็คเกจelm-lang / html แพคเกจนี้จะช่วยให้เราแสดงผลของรหัส elm ในเบราว์เซอร์

ข้ามไปที่ไฟล์ HelloApp โฟลเดอร์โครงการโดยคลิกขวาที่ไฟล์→เปิดในพรอมต์คำสั่งใน VSCode

ดำเนินการคำสั่งต่อไปนี้ในหน้าต่างเทอร์มินัล -

C:\Users\dell\Elm\HelloApp> elm-package install elm-lang/html

ไฟล์ / โฟลเดอร์ต่อไปนี้ถูกเพิ่มลงในไดเร็กทอรีโปรเจ็กต์เมื่อติดตั้งแพ็กเกจ

  • elm-package.json (ไฟล์) เก็บข้อมูลเมตาของโครงการ
  • elm-stuff (โฟลเดอร์) จัดเก็บแพ็คเกจภายนอก

ข้อความต่อไปนี้จะปรากฏขึ้นเมื่อติดตั้งแพคเกจสำเร็จ

Step 3 − Add the following code to the Hello.elm file

-- importing Html module and the function text
import Html exposing (text)

-- create main method
main =
-- invoke text function
text "Hello Elm from TutorialsPoint"

โปรแกรมด้านบนจะแสดงข้อความสตริง Hello Elm from TutorialsPoint ในเบราว์เซอร์

สำหรับสิ่งนี้เราจำเป็นต้องนำเข้าฟังก์ชัน text ภายใน Htmlโมดูล. ฟังก์ชันข้อความใช้เพื่อพิมพ์ค่าสตริงในเบราว์เซอร์ วิธีการหลักคือจุดเข้าสู่โปรแกรม หลักวิธีการเรียกข้อความที่ฟังก์ชั่นและส่งผ่านค่าสตริงกับมัน

Step 4 − Compile the project

ดำเนินการคำสั่งต่อไปนี้ในหน้าต่างเทอร์มินัล VSCode

elm make Hello.elm

ผลลัพธ์ของคำสั่งดังกล่าวเป็นดังที่แสดงด้านล่าง -

//update path to the proj folder in the command elm make
C:\Users\dell\elm\HelloApp>elm make Hello.elm
Success! Compiled 38 modules.
Successfully generated index.html

คำสั่งดังกล่าวจะสร้างไฟล์ index.htmlไฟล์. คอมไพเลอร์ elm แปลงไฟล์. elm เป็น JavaScript และฝังไว้ในไฟล์index.html ไฟล์.

Step 5 − Open the index.html in the browser

เปิดไฟล์index.htmlในเบราว์เซอร์ใดก็ได้ ผลลัพธ์จะเป็นดังที่แสดงด้านล่าง -

ความคิดเห็นใน Elm

ความคิดเห็นเป็นวิธีหนึ่งในการปรับปรุงความสามารถในการอ่านของโปรแกรม ข้อคิดเห็นสามารถใช้เพื่อรวมข้อมูลเพิ่มเติมเกี่ยวกับโปรแกรมเช่นผู้เขียนโค้ดคำแนะนำเกี่ยวกับโครงสร้างฟังก์ชัน ฯลฯ คอมไพเลอร์ไม่สนใจข้อคิดเห็น

Elm สนับสนุนความคิดเห็นประเภทต่อไปนี้ -

  • ความคิดเห็นบรรทัดเดียว (-) - ข้อความใด ๆ ระหว่าง a - และท้ายบรรทัดจะถือว่าเป็นความคิดเห็น

  • ความคิดเห็นหลายบรรทัด ({- -}) - ความคิดเห็นเหล่านี้อาจครอบคลุมหลายบรรทัด

ภาพประกอบ

-- this is single line comment

{- This is a
   Multi-line comment
-}

เส้นและการเยื้อง

Elm ไม่มีวงเล็บปีกกาเพื่อระบุบล็อกของรหัสสำหรับข้อกำหนดฟังก์ชันหรือการควบคุมการไหล บล็อกของโค้ดแสดงด้วยการเยื้องบรรทัดซึ่งบังคับใช้อย่างเข้มงวด ข้อความทั้งหมดในบล็อกต้องเยื้องเป็นจำนวนเท่ากัน ตัวอย่างเช่น -

module ModuleIf exposing (..)
x = 0

function1 =
   if x > 5 then
      "x is greater"
   else
      "x is small"

อย่างไรก็ตามบล็อกต่อไปนี้สร้างข้อผิดพลาด -

-- Create file ModuleIf.elm
module ModuleIf exposing (..)
x = 0

function1 =
   if x > 5 then
      "x is greater"
         else --Error:else indentation not at same level of if statement
      "x is small"

ดังนั้นใน Elm เส้นต่อเนื่องทั้งหมดที่เยื้องด้วยช่องว่างจำนวนเท่ากันจะก่อตัวเป็นบล็อก

C:\Users\admin>elm repl
---- elm-repl 0.18.0 -----------------------------------------------------------
   :help for help, :exit to exit, more at 
   <https://github.com/elm-lang/elm-repl>
   ---------------------------------------
   -----------------------------------------

> import ModuleIf exposing(..) -- importing module from ModuleIf.elm file
>function1 -- executing function from module
-- SYNTAX PROBLEM ---------------------------------------------------

I need whitespace, but got stuck on what looks like a new declaration. 
You are either missing some stuff in the declaration above or just need to add some spaces here:
7| else
   ^
I am looking for one of the following things:

   whitespace

Type System แสดงถึงค่าประเภทต่างๆที่ภาษารองรับ Type System ตรวจสอบความถูกต้องของค่าที่ให้มาก่อนที่จะจัดเก็บหรือจัดการโดยโปรแกรม เพื่อให้แน่ใจว่าโค้ดทำงานตามที่คาดไว้ ระบบ Type ยังช่วยให้สามารถระบุคำใบ้รหัสได้มากขึ้นและเอกสารอัตโนมัติด้วย

Elm เป็นภาษาที่พิมพ์แบบคงที่ Elm มีประเภทที่คล้ายคลึงกับภาษาอื่น ๆ

จำนวน

จำนวนชนิดข้อมูลแสดงให้เห็นถึงค่าตัวเลข ระบบประเภท Elm รองรับประเภทตัวเลขต่อไปนี้ -

เลขที่ ประเภท ตัวอย่าง
1 หมายเลข - เก็บหมายเลขใด ๆ 7 คือประเภทตัวเลข
2 ลอย - เก็บค่าเศษส่วน 7/2 ให้ 3.5 ผลลัพธ์เป็น Float
3 Int - เก็บค่าที่ไม่ใช่เศษส่วน 7 // 2 ให้ 3 ผลลัพธ์เป็น Int

หมายเลขประเภทรองรับทั้งค่าเศษส่วนและค่าไม่ใช่เศษส่วน เปิด elm REPL และลองทำตามตัวอย่างด้านล่าง -

C:\Users\admin>elm repl
---- elm-repl 0.18.0 
---------------------------------------------
--------------
:help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
------------------------------------------
--------------------------------------
> 7
7 : number
> 7/2
3.5 : Float
> 7//2
3 : Int
>

สตริงและอักขระ

Stringชนิดข้อมูลจะใช้เพื่อแสดงลำดับของตัวอักษร Charชนิดข้อมูลจะใช้เพื่อแสดงตัวเดียว ค่าสตริงถูกกำหนดไว้ภายในเครื่องหมายคำพูดคู่ "และค่าCharจะอยู่ภายในเครื่องหมายคำพูดเดียว '

เลขที่ ประเภท ตัวอย่าง
1 String - จัดเก็บลำดับของอักขระ "TutorialsPoint"
2 Char - เก็บค่าเศษส่วน 'T'

เปิด elm REPL และลองทำตามตัวอย่างด้านล่าง -

C:\Users\admin>elm repl
---- elm-repl 0.18.0 ---------------------------------------
--------------------
:help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
--------------------------------------
------------------------------------------
> "TutorialsPoint"
"TutorialsPoint" : String
> 'T'
'T' : Char

บูล

ชนิดข้อมูล Bool ใน Elm รองรับเพียงสองค่า - จริงและเท็จ คีย์เวิร์ด Bool ใช้เพื่อแสดงค่าบูลีน

เลขที่ ประเภท ตัวอย่าง
1 Bool - เก็บค่าเป็นจริงหรือเท็จ 1 == 1 คืนค่า True

เปิด elm REPL และลองทำตามตัวอย่างด้านล่าง -

C:\Users\dell\elm>elm repl
---- elm-repl 0.18.0 -----------------------------------
------------------------
:help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
----------------------------------------
----------------------------------------
> True
True : Bool
> False
False : Bool
> 1==1
True : Bool
> 1==2
False : Bool
> 1 /= 2 -- not equal
True : Bool
> not True
False : Bool
> not False
True : Bool

ประเภทที่กำหนดเอง

Elm สนับสนุนการสร้างประเภทที่ผู้ใช้กำหนด ตัวอย่างเช่นพิจารณาใบสมัครการชำระเงิน แอปพลิเคชันต้องการจัดเก็บรูปแบบการชำระเงินที่แตกต่างกัน - บัตรเครดิตบัตรเดบิตและธนาคารสุทธิ สิ่งนี้สามารถทำได้โดยการกำหนดประเภทที่กำหนดเองและ จำกัด มูลค่าไว้ที่สามโหมดการชำระเงินที่ยอมรับได้

ตัวอย่างต่อไปนี้แสดงวิธีสร้างประเภทที่กำหนดเอง

> type PaymentMode = CreditCard|NetBanking|DebitCard
> payment1 = CreditCard
CreditCard : Repl.PaymentMode
> payment2 = DebitCard
DebitCard : Repl.PaymentMode
> payment3 = UPI
-- NAMING ERROR ---------------------------------------------- repl-temp-000.elm

Cannot find variable `UPI`

7| payment3 = UPI

ในตัวอย่างข้างต้นเราได้สร้างประเภท PaymentMode ที่กำหนดเอง ตัวแปรการชำระเงิน 1 และการชำระเงิน 2 ถูกกำหนดให้กับค่าโหมด PaymentMode หากค่าที่กำหนดให้กับตัวแปรไม่ตรงกับค่าใด ๆ ที่กำหนดโดยประเภท PaymentMode แอปพลิเคชันจะแสดงข้อผิดพลาดทางไวยากรณ์

ประเภทข้อมูลที่มีโครงสร้าง

ประเภทข้อมูลที่มีโครงสร้างสามารถใช้เพื่อเก็บค่าหลายค่าในรูปแบบที่มีโครงสร้าง Elm รองรับประเภทข้อมูลที่มีโครงสร้างดังต่อไปนี้ -

  • Tuple
  • List
  • Record
  • Record

สิ่งเหล่านี้จะกล่าวถึงโดยละเอียดในบทต่อ ๆ ไป

ตัวแปรตามคำนิยามคือ“ พื้นที่ที่มีชื่อในหน่วยความจำ” ที่เก็บค่า กล่าวอีกนัยหนึ่งก็คือทำหน้าที่เป็นที่เก็บสำหรับค่าในโปรแกรม ตัวแปรช่วยให้โปรแกรมจัดเก็บและจัดการค่า

ตัวแปรใน Elm เชื่อมโยงกับชนิดข้อมูลเฉพาะ ชนิดข้อมูลกำหนดขนาดและโครงร่างของหน่วยความจำของตัวแปรช่วงของค่าที่สามารถจัดเก็บภายในหน่วยความจำนั้นและชุดของการดำเนินการที่สามารถดำเนินการกับตัวแปรได้

กฎการตั้งชื่อตัวแปร

ในส่วนนี้เราจะเรียนรู้เกี่ยวกับกฎการตั้งชื่อตัวแปร

  • ชื่อตัวแปรสามารถประกอบด้วยตัวอักษรตัวเลขและอักขระขีดล่าง
  • ชื่อตัวแปรต้องไม่ขึ้นต้นด้วยตัวเลข ต้องขึ้นต้นด้วยตัวอักษรหรือขีดล่าง
  • อักษรตัวพิมพ์ใหญ่และตัวพิมพ์เล็กมีความแตกต่างกันเนื่องจาก Elm เป็นตัวพิมพ์เล็กและใหญ่

การประกาศตัวแปรใน Elm

ประเภทไวยากรณ์สำหรับการประกาศตัวแปรใน Elm แสดงไว้ด้านล่าง -

ไวยากรณ์ 1

variable_name:data_type = value

ไวยากรณ์“:” (เรียกว่าคำอธิบายประกอบประเภท) ใช้เพื่อเชื่อมโยงตัวแปรกับชนิดข้อมูล

ไวยากรณ์ 2

variable_name = value-- no type specified

ชนิดข้อมูลเป็นทางเลือกในขณะที่ประกาศตัวแปรใน Elm ในกรณีนี้ชนิดข้อมูลของตัวแปรจะอนุมานจากค่าที่กำหนดให้

ภาพประกอบ

ตัวอย่างนี้ใช้โปรแกรมแก้ไข VSCode เพื่อเขียนโปรแกรม elm และดำเนินการโดยใช้ elm repl

Step 1 − Create a project folder - VariablesApp. Create a Variables.elm file in the project folder.

เพิ่มเนื้อหาต่อไปนี้ลงในไฟล์

module Variables exposing (..) //Define a module and expose all contents in the module
message:String -- type annotation
message = "Variables can have types in Elm"

โปรแกรมกำหนดตัวแปรโมดูล ชื่อของโมดูลต้องตรงกับชื่อของไฟล์โปรแกรม elm ไวยากรณ์ (.. ) ใช้เพื่อแสดงส่วนประกอบทั้งหมดในโมดูล

โปรแกรมประกาศข้อความตัวแปรประเภทสตริง

Step 2 − Execute the program.

  • พิมพ์คำสั่งต่อไปนี้ในเทอร์มินัล VSCode เพื่อเปิด elm REPL
elm repl
  • ดำเนินการคำสั่ง elm ต่อไปนี้ในเทอร์มินัล REPL
> import Variables exposing (..) --imports all components from the Variables module
> message --Reads value in the message varaible and prints it to the REPL 
"Variables can have types in Elm":String
>

ภาพประกอบ

ใช้ Elm REPL เพื่อลองทำตามตัวอย่างต่อไปนี้

C:\Users\dell\elm>elm repl
---- elm-repl 0.18.0 ---------------------------------------
--------------------
:help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
-------------------------------------
------------------------------------------
> company = "TutorialsPoint"
"TutorialsPoint" : String
> location = "Hyderabad"
"Hyderabad" : String
> rating = 4.5
4.5 : Float

ที่นี่ บริษัท และสถานที่ตั้งตัวแปรคือตัวแปร String และการให้คะแนนเป็นตัวแปร Float

elm REPL ไม่สนับสนุนคำอธิบายประกอบประเภทสำหรับตัวแปร ตัวอย่างต่อไปนี้แสดงข้อผิดพลาดหากรวมชนิดข้อมูลไว้ในขณะที่ประกาศตัวแปร

C:\Users\dell\elm>elm repl
---- elm-repl 0.18.0 -----------------------------------------
------------------
:help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
----------------------------------------
----------------------------------------
> message:String
-- SYNTAX PROBLEM -------------------------------------------- repl-temp-000.elm

A single colon is for type annotations. Maybe you want :: instead? Or maybe you
are defining a type annotation, but there is whitespace before it?

3| message:String
^

Maybe <http://elm-lang.org/docs/syntax> can help you figure it out.

ในการแทรกตัวแบ่งบรรทัดขณะใช้ elm REPL ให้ใช้ \ syntax ดังที่แสดงด้านล่าง -

C:\Users\dell\elm>elm repl
---- elm-repl 0.18.0 --------------------------------------
---------------------
:help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
------------------------------------------
--------------------------------------
> company \ -- firstLine
| = "TutorialsPoint" -- secondLine
"TutorialsPoint" : String

ตัวดำเนินการกำหนดฟังก์ชันบางอย่างที่จะดำเนินการกับข้อมูล ค่าที่ตัวดำเนินการทำงานเรียกว่าตัวถูกดำเนินการ พิจารณานิพจน์ต่อไปนี้

7 + 5 = 12

ที่นี่ค่า 7, 5 และ 12 เป็นตัวถูกดำเนินการในขณะที่ + และ = เป็นตัวดำเนินการ

ตัวดำเนินการหลักใน Elm สามารถจำแนกได้เป็น -

  • Arithmetic
  • Relational
  • Logical

ตัวดำเนินการเลขคณิต

สมมติค่าในตัวแปร a และ b คือ 7 และ 2 ตามลำดับ

แสดงตัวอย่าง

เลขที่ ตัวดำเนินการ คำอธิบาย ตัวอย่าง
1 + (เพิ่มเติม) ส่งคืนผลรวมของตัวถูกดำเนินการ a + b คือ 9
2 - (การลบ) ส่งกลับผลต่างของค่า ab คือ 5
3 * (การคูณ) ส่งคืนผลิตภัณฑ์ของค่า a * b คือ 14
4 / (กองลอย) ดำเนินการหารและส่งกลับผลหารลอย a / b คือ 3.5
5 // (กองจำนวนเต็ม) ดำเนินการหารและส่งกลับผลหารจำนวนเต็ม a // b คือ 3
6 % (โมดูลัส) ดำเนินการหารและส่งคืนส่วนที่เหลือ a% b คือ 1

ตัวดำเนินการเชิงสัมพันธ์

ตัวดำเนินการเชิงสัมพันธ์ทดสอบหรือกำหนดชนิดของความสัมพันธ์ระหว่างสองเอนทิตี ตัวดำเนินการเหล่านี้ใช้เพื่อเปรียบเทียบค่าตั้งแต่สองค่าขึ้นไป ตัวดำเนินการเชิงสัมพันธ์ส่งคืนค่าบูลีนเช่นจริงหรือเท็จ

สมมติว่าค่าของaคือ 10 และbคือ 20

แสดงตัวอย่าง

เลขที่ ตัวดำเนินการ คำอธิบาย ตัวอย่าง
1 > มากกว่า (a> b) เป็นเท็จ
2 < น้อยกว่า (a <b) เป็น True
3 > = มากกว่าหรือเท่ากับ (a> = b) เป็นเท็จ
4 <= น้อยกว่าหรือเท่ากับ (a <= b) เป็น True
5 == ความเท่าเทียมกัน (a == b) เป็นเท็จ
6 ! = ไม่เท่ากับ (a! = b) เป็นจริง

ประเภทที่เทียบเคียงได้

ตัวดำเนินการเปรียบเทียบเช่น> = หรือ <ทำงานกับประเภทที่เปรียบเทียบได้ สิ่งเหล่านี้ถูกกำหนดให้เป็นตัวเลขอักขระสตริงและรายการทูเปิล ประเภทที่เปรียบเทียบได้ทั้งสองด้านของตัวดำเนินการต้องเหมือนกัน

เลขที่ ประเภทที่เทียบเคียงได้ ตัวอย่าง
1 จำนวน 7> 2 ให้ True
2 ตัวละคร 'a' == 'b' ให้ False
3 สตริง "hello" == "hello" ให้ True
4 ทูเพิล (1, "One") == (1, "One") ให้ True
5 รายการ [1,2] == [1,2] ให้ True

เปิด elm REPL และลองใช้ตัวอย่างที่แสดงด้านล่าง -

C:\Users\admin>elm repl
---- elm-repl 0.18.0 -----------------------------------------------------------
:help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
--------------------------------------------------------------------------------
> 7>2
True : Bool
> 7.0>2
True : Bool
> 7.0<2.0
False : Bool
> 'a' > 'b'
False : Bool
> 'a' < 'b'
True : Bool
> "a" < "b"
True : Bool
> (1,2) > (2,3)
False : Bool
> ['1','3'] < ['2','1']
True : Bool
>

ตัวดำเนินการทางตรรกะ

ตัวดำเนินการทางตรรกะใช้เพื่อรวมเงื่อนไขสองเงื่อนไขขึ้นไป ตัวดำเนินการทางตรรกะส่งคืนค่าบูลีนเช่นกัน

แสดงตัวอย่าง

เลขที่ ตัวดำเนินการ คำอธิบาย ตัวอย่าง
1 && ตัวดำเนินการจะคืนค่าจริงก็ต่อเมื่อนิพจน์ทั้งหมดที่ระบุส่งคืนเป็นจริง (10> 5) && (20> 5) คืนค่า True
2 || ตัวดำเนินการจะคืนค่าจริงหากนิพจน์อย่างน้อยหนึ่งนิพจน์ที่ระบุกลับเป็นจริง (10 <5) || (20> 5) คืนค่า True
3 ไม่ ตัวดำเนินการส่งคืนค่าผกผันของผลลัพธ์ของนิพจน์ สำหรับ Eg:! (> 5) ส่งกลับเท็จ not (10 <5) คืนค่า True
4 xor ตัวดำเนินการจะส่งคืนค่าจริงก็ต่อเมื่ออินพุตหนึ่งรายการส่งคืนเป็นจริงเท่านั้น ตัวดำเนินการส่งคืนเท็จหากทั้งสองนิพจน์กลับเป็นจริง xor (10> 5) (20> 5) ส่งกลับเท็จ

โครงสร้างการตัดสินใจกำหนดให้โปรแกรมเมอร์ระบุเงื่อนไขอย่างน้อยหนึ่งเงื่อนไขที่จะประเมินหรือทดสอบโดยโปรแกรมพร้อมกับคำสั่งหรือคำสั่งที่จะดำเนินการหากเงื่อนไขถูกกำหนดให้เป็นจริงและเป็นทางเลือกที่จะดำเนินการคำสั่งอื่น ๆ หาก เงื่อนไขถูกกำหนดให้เป็นเท็จ

ด้านล่างนี้เป็นรูปแบบทั่วไปของโครงสร้างการตัดสินใจโดยทั่วไปที่พบในภาษาโปรแกรมส่วนใหญ่

โครงสร้างการตัดสินใจจะประเมินเงื่อนไขก่อนดำเนินการตามคำสั่ง โครงสร้างการตัดสินใจใน Elm แบ่งได้ดังนี้ -

เลขที่ คำให้การ คำอธิบาย
1 ถ้า ... แล้ว ... อื่นคำสั่ง คำสั่ง if ประกอบด้วยนิพจน์บูลีนตามด้วยซึ่งจะถูกดำเนินการหากนิพจน์คืนค่าเป็นจริงและอื่น ๆ ซึ่งจะถูกดำเนินการหากนิพจน์ส่งคืนเท็จ
2 คำสั่ง if ซ้อนกัน คุณสามารถใช้ if ... then ... else inside another if.
3 คำชี้แจงกรณี ทดสอบค่าของตัวแปรเทียบกับรายการค่า

ถ้า ... แล้ว ... อื่น ๆ คำชี้แจง

if…thenโครงสร้างจะประเมินเงื่อนไขก่อนที่จะดำเนินการบล็อกโค้ด หากนิพจน์บูลีนประเมินว่าเป็นจริงบล็อกของโค้ดที่อยู่ในคำสั่งนั้นจะถูกดำเนินการ ถ้านิพจน์บูลีนประเมินว่าเป็นเท็จบล็อกของโค้ดภายในคำสั่ง else จะถูกเรียกใช้

ไม่เหมือนกับภาษาโปรแกรมอื่น ๆ ใน Elm เราต้องระบุสาขาอื่น มิฉะนั้น Elm จะโยนข้อผิดพลาด

ไวยากรณ์

if boolean_expression then statement1_ifTrue else statement2_ifFalse

ภาพประกอบ

ลองใช้ตัวอย่างต่อไปนี้ในเทอร์มินัล REPL

> if 10>5 then "10 is bigger" else "10 is small"
"10 is bigger" : String

ซ้อนถ้า

คำสั่ง if ที่ซ้อนกันมีประโยชน์สำหรับการทดสอบหลายเงื่อนไข ไวยากรณ์ของคำสั่ง if ที่ซ้อนกันได้รับด้านล่าง -

if boolean_expression1 then statement1_ifTrue else if boolean_expression2 then statement2_ifTrue else statement3_ifFalse

ภาพประกอบ

ลองใช้ตัวอย่างต่อไปนี้ใน Elm REPL -

> score=80
80 : number
> if score>=80 then "Outstanding" else if score > = 70 then "good" else "average"
"Outstanding" : String

คำชี้แจงกรณี

สามารถใช้คำสั่ง case เพื่อลดความซับซ้อนของคำสั่ง if then else ไวยากรณ์ของคำสั่ง case มีดังต่อไปนี้ -

case variable_name of
   constant1 -> Return_some_value
   constant2 -> Return_some_value
   _ -> Return_some_value if none of the above values match

คำสั่ง case ตรวจสอบว่าค่าของตัวแปรตรงกับชุดค่าคงที่ที่กำหนดไว้ล่วงหน้าหรือไม่และส่งกลับค่าที่เกี่ยวข้อง โปรดทราบว่าค่าที่ส่งคืนโดยแต่ละกรณีต้องเป็นประเภทเดียวกัน หากค่าตัวแปรไม่ตรงกับค่าคงที่ที่กำหนดการควบคุมจะถูกส่งไปที่ * default * (แสดงด้วย // _) และส่งคืนค่าที่เกี่ยวข้อง

ภาพประกอบ

ลองใช้ตัวอย่างต่อไปนี้ใน Elm REPL -

> n = 10
10 : number
> case n of \
| 0 -> "n is Zero" \
| _ -> "n is not Zero"
"n is not Zero" : String

ข้อมูลโค้ดด้านบนตรวจสอบว่าค่าของ n เป็นศูนย์หรือไม่ การควบคุมจะถูกส่งผ่านไปยังค่าเริ่มต้นซึ่งจะส่งคืนสตริง“ n ไม่ใช่ศูนย์”

Elm เป็นภาษาโปรแกรมที่ใช้งานได้ Elm ใช้แนวคิดการเรียกซ้ำเป็นทางเลือกหนึ่งของโครงสร้างการวนซ้ำแบบเดิม

บทนี้จะกล่าวถึงแนวคิดของการเรียกซ้ำ

การเรียกซ้ำ

ภาษาโปรแกรมคอมพิวเตอร์บางภาษาอนุญาตให้โมดูลหรือฟังก์ชันเรียกตัวเองได้ เทคนิคนี้เรียกว่าการเรียกซ้ำ

ภาพประกอบ

ในโปรแกรมนี้เราจะดูวิธีใช้การเรียกซ้ำเพื่อแสดงสวัสดีห้าครั้ง

Step 1 − Create a file Loop.elm

สร้างโมดูลลูปและกำหนดฟังก์ชัน sayHello. ฟังก์ชัน sayHello รับค่าจำนวนเต็มเป็นอินพุตและส่งกลับค่าสตริง

module Loop exposing(..)
//function signature
sayHello:Int ->String
//function implementation
sayHello n =
   case n of
   1 -> "Hello:1 "
   _ -> "Hello:" ++ toString (n) ++ " " ++ sayHello(n-1)

ฟังก์ชัน sayHello ตรวจสอบว่าพารามิเตอร์ผ่านคือ 1 หรือไม่หากพารามิเตอร์เป็น 1 ฟังก์ชันจะส่งกลับมิฉะนั้นจะสร้างสตริง Hello และเรียกใช้ฟังก์ชันเดียวกัน

Step 2 − Invoke sayHello from REPL

เปิด elm REPL จากโฟลเดอร์โครงการปัจจุบัน (ตำแหน่งของไฟล์ Loop.elm)

//import the module Loop
> import Loop exposing(..)
//invoke the sayHello function with parameter value as 5
> sayHello 5
"Hello:5 Hello:4 Hello:3 Hello:2 Hello:1 Hello:0 " : String
>

ภาพประกอบ

ตัวอย่างต่อไปนี้พิมพ์ผลรวมของตัวเลข n โดยใช้การเรียกซ้ำ

> sumOfNos n =\
| if n==0 then 0 \
| else (n) + sumOfNos (n-1)
<function> : number -> number1

ใน elm REPL เราได้สร้างฟังก์ชัน sumOfNos ที่รับหมายเลขอินพุตและรวมตัวเลขทั้งหมดจาก 0 ถึงตัวเลขนั้น

ตัวอย่างเช่นถ้าเราผ่านการป้อนข้อมูลเท่าที่ 5 ก็จะสรุป1 + 2 + 3 + 4 + 5ซึ่งเป็นวันที่ 15

> ssumOfNos 5
15 : number

ผลลัพธ์ของโปรแกรมแสดงไว้ด้านบน

ฟังก์ชันเป็นส่วนประกอบสำคัญของโปรแกรม Elm ฟังก์ชันคือชุดของคำสั่งเพื่อดำเนินงานเฉพาะ

ฟังก์ชั่นจัดระเบียบโปรแกรมเป็นบล็อกตรรกะของโค้ด เมื่อกำหนดแล้วฟังก์ชันอาจถูกเรียกใช้เพื่อเข้าถึงรหัส สิ่งนี้ทำให้โค้ดสามารถใช้ซ้ำได้ ยิ่งไปกว่านั้นฟังก์ชั่นช่วยให้อ่านและบำรุงรักษาโค้ดของโปรแกรมได้ง่าย

ขั้นตอนในการใช้ฟังก์ชัน

มีสามขั้นตอนในการใช้ฟังก์ชัน -

การประกาศฟังก์ชัน

การประกาศฟังก์ชันจะบอกคอมไพลเลอร์เกี่ยวกับชื่อของฟังก์ชันชนิดการส่งคืนและพารามิเตอร์ ไวยากรณ์สำหรับการประกาศฟังก์ชันแสดงไว้ด้านล่าง -

fn_name:data_type_of_the_parameters ->return_type

การประกาศฟังก์ชันระบุสิ่งต่อไปนี้ -

  • ชื่อของฟังก์ชัน

  • ชนิดข้อมูลของพารามิเตอร์ นี่เป็นทางเลือกเนื่องจากฟังก์ชันอาจมีหรือไม่มีพารามิเตอร์ก็ได้

  • ชนิดข้อมูลของค่าซึ่งฟังก์ชันจะส่งกลับ ฟังก์ชันใน Elm ต้องส่งคืนค่าเสมอเนื่องจาก Elm เป็นภาษาโปรแกรมที่ใช้งานได้ ซึ่งแตกต่างจากฟังก์ชันในภาษาโปรแกรมอื่น ๆ ฟังก์ชัน Elm จะไม่ใช้คีย์เวิร์ด return เพื่อส่งคืนค่า

นิยามฟังก์ชันหรือการนำฟังก์ชันไปใช้

นิยามของฟังก์ชันระบุเนื้อความจริงของฟังก์ชัน นิยามฟังก์ชันระบุวิธีการทำงานเฉพาะ ไวยากรณ์สำหรับการกำหนดฟังก์ชันมีดังต่อไปนี้ -

fn_name parameter1 parameter2 = statements

เรียกใช้หรือเรียกใช้ฟังก์ชัน

ต้องมีการเรียกใช้ฟังก์ชันเพื่อดำเนินการ ไวยากรณ์สำหรับการเรียกใช้ฟังก์ชันแสดงไว้ด้านล่าง -

fn_name parameter1 parameter2

ภาพประกอบ

รหัสต่อไปนี้กำหนดการทักทายของฟังก์ชัน ฟังก์ชันส่งคืนสตริง "Hello"

> greet = \
| if True then \
| "Hello" \
| else \
| "GoodBye"
"Hello" : String
> greet
"Hello" : String

ฟังก์ชันที่กำหนดพารามิเตอร์

พารามิเตอร์เป็นกลไกในการส่งผ่านค่าไปยังฟังก์ชัน ค่าของพารามิเตอร์จะถูกส่งไปยังฟังก์ชันในช่วงเวลาของการเรียกใช้ฟังก์ชัน

ภาพประกอบ 1

ตัวอย่างต่อไปนี้กำหนดฟังก์ชันfn_add ฟังก์ชันยอมรับตัวเลขสองตัวเป็นพารามิเตอร์และส่งกลับผลรวม ลองทำสิ่งต่อไปนี้ใน elm REPL -

> fn_add x y = x+y
<function> : number -> number -> number
> fn_add 10 20
30 : number

ภาพประกอบ 2

ตัวอย่างต่อไปนี้กำหนดฟังก์ชัน sayHello ฟังก์ชัน sayHello ยอมรับและส่งคืนค่าสตริงเป็นพารามิเตอร์และส่งคืนสตริง

> sayHello name = "Hello "++ name
<function> : String -> String
> sayHello "Tutorialspoint"
"Hello Tutorialspoint" : String
>

ตัวดำเนินการท่อ

เพื่อให้เข้าใจผู้ประกอบท่อ |> ให้เราพิจารณาตัวอย่างที่เรามีรายชื่อของสตริงที่แตกต่างกันหนึ่ง[ "A", "B", "C"] ตอนนี้เราต้องการสตริงเดี่ยวซึ่งคั่นด้วย -

ตัวอย่างต่อไปนี้แสดงวิธีดำเนินการกับString.join

> String.join "-" ["a","b","c","d","e","f"]
"a-b-c-d-e-f" : String

การดำเนินการเดียวกันสามารถทำได้โดยใช้ตัวดำเนินการไปป์ |> ตัวดำเนินการไปป์สามารถใช้เพื่อเชื่อมโยงการเรียกใช้ฟังก์ชันต่างๆ

> ["a","b","c","d","e","f"] |> String.join "-"
"a-b-c-d-e-f" : String
> ["a","b","c","d","e","f"] |> List.reverse |> String.join "-"
"f-e-d-c-b-a" : String

ในตัวอย่างแรกเรากำลังเชื่อมโยงรายการเพื่อเข้าร่วมวิธีการ ในกรณีที่สองรายการเดียวกันจะถูกส่งไปยังฟังก์ชันย้อนกลับและหลังจากนั้นจะถูกส่งต่อเพื่อเข้าร่วม ดังนั้นรายการจะแสดงในแบบย้อนกลับและเข้าร่วม

ลำดับของอักขระ Unicode เรียกว่า String ใน Elm สตริงจะอยู่ใน "" คำพูดคู่ สตริงคือกลุ่มข้อความดังที่แสดงด้านล่าง

> "TutorialsPoint"
"TutorialsPoint" : String
> location = "Hyderabad" --variable
"Hyderabad" : String
> location
"Hyderabad" : String
>

ฟังก์ชันสตริง

ฟังก์ชันทั่วไปบางอย่างที่สามารถใช้ในการสืบค้นหรือปรับแต่งค่าสตริงได้รับด้านล่าง ใช้ REPL เพื่อลองทำตามตัวอย่างด้านล่าง

ซีเนียร์ไม่มี วิธี คำอธิบาย
1 isEmpty: String -> Bool สตริงตรวจสอบว่างเปล่า
2 ย้อนกลับ: สตริง -> สตริง ย้อนกลับสตริงอินพุต
3 ความยาว: String -> Int ส่งกลับความยาวจำนวนเต็ม
4 ผนวก: String -> String -> String ผนวกสองสตริงและส่งคืนสตริงใหม่
5 ผนวก: String -> Sconcat: List String -> String ต่อท้ายรายการสตริงและส่งคืนสตริงใหม่
6 แยก: สตริง -> สตริง -> สตริงรายการ แยกสตริงอินพุตโดยใช้ตัวคั่นที่กำหนดส่งคืนรายการสตริง
7 ชิ้น: Int -> Int -> String -> String ส่งคืนสตริงย่อยที่ได้รับเริ่มต้นดัชนีสิ้นสุดและสตริงอินพุต
8 ประกอบด้วย: String -> String -> Bool ส่งคืนค่าจริงหากสตริงที่สองมีสตริงแรก
9 toInt: String -> Result.Result String Int แยกวิเคราะห์ String เป็น Integer
10 toInt: String -> Result.Result String Int แยกวิเคราะห์ String เป็น Integer
11 toFloat: String -> Result ผลลัพธ์ String Float แยกวิเคราะห์สตริงที่จะลอย
12 fromChar: Char -> สตริง สร้างสตริงจากอักขระที่กำหนด
13 toList: String -> รายการ Char แปลงสตริงเป็นรายการอักขระ
14 fromList: รายการ Char -> String แปลงรายการอักขระเป็น String
15 toUpper: String -> String แปลงสตริงอินพุตเป็นตัวพิมพ์ใหญ่
16 ตัดแต่ง: สตริง -> สตริง กำจัดช่องว่างทั้งสองด้านของสตริง
17 ตัวกรอง: (Char -> Bool) -> String -> String กรองชุดอักขระจากสตริงอินพุต
18 แผนที่: (Char -> Char) -> String -> String แปลงอักขระทุกตัวในสตริงอินพุต

มันว่างเปล่า

ฟังก์ชันนี้สามารถใช้เพื่อพิจารณาว่าสตริงว่างหรือไม่ ฟังก์ชันนี้จะคืนค่า True หากสตริงที่ให้มาว่างเปล่า

ไวยากรณ์

String.isEmpty String_value

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.isEmpty
<function> : String -> Bool

ลายเซ็นของฟังก์ชันแสดง Bool เป็นชนิดส่งคืนและประเภทอินพุตเป็น String -

ภาพประกอบ

> String.isEmpty ""
True : Bool
> String.isEmpty "Tutorialspoint"
False : Bool
> location = "Hyderabad"
"Hyderabad" : String
> String.isEmpty location
False : Bool

ย้อนกลับ

ฟังก์ชันนี้ย้อนกลับสตริง

ไวยากรณ์

String.reverse String_value

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.reverse
<function> : String -> String

ลายเซ็นของฟังก์ชันแสดง String เป็นชนิดส่งคืนและประเภทอินพุตเป็น String -

ภาพประกอบ

> String.reverse "TutorialsPoint"
"tnioPslairotuT" : String

ความยาว

ฟังก์ชันนี้ส่งกลับความยาวของสตริง

ไวยากรณ์

String.length String_value

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.length
<function-> : String -> Int

ลายเซ็นของฟังก์ชันแสดง Int เป็นชนิดส่งคืนและประเภทอินพุตเป็น String

ภาพประกอบ

> String.length "Mohtashim"
9 : Int

ผนวก

ฟังก์ชันนี้จะส่งคืนสตริงใหม่โดยการต่อท้ายสองสตริง

ไวยากรณ์

String.append String_value1 String_value2

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.append
<function-> : String -> String -> String

ลายเซ็นของแสดงพารามิเตอร์อินพุตสตริงสองตัวและพารามิเตอร์เอาต์พุตสตริงหนึ่งตัว

ภาพประกอบ

> String.append "Tutorials" "Point"
TutorialsPoint : String

concat

ฟังก์ชันนี้จะส่งคืนสตริงใหม่โดยการเชื่อมสตริงจำนวนมากเข้าด้วยกัน

ไวยากรณ์

String.concat [String1,String2,String3]

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.concat
<function> : List String -> String

ลายเซ็นของแสดงรายการพารามิเตอร์อินพุตสตริงและชนิดส่งคืนสตริง

ภาพประกอบ

> String.concat ["Hello","Tutorials","Point"]
HelloTutorialsPoint : String

แยก

ฟังก์ชันนี้จะแยกสตริงโดยใช้ตัวคั่นที่กำหนด

ไวยากรณ์

String.split string_seperator String_value

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.split
<function> : String -> String -> List String

ลายเซ็นของแสดงพารามิเตอร์สตริงอินพุตสองรายการและเอาต์พุตเป็นรายการประเภทสตริง

ภาพประกอบ

> String.split "," "Hello,Tutorials,Point"
["Hello","Tutorials","Point"] : List String

ฝาน

ฟังก์ชันนี้ส่งคืนสตริงย่อยที่กำหนดดัชนีเริ่มต้นและสิ้นสุด ดัชนีเชิงลบจะเริ่มต้นจากส่วนท้ายของรายการ ค่าของดัชนีเริ่มจากศูนย์

ไวยากรณ์

String.slice start_index end_index String_value

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.slice
<function> : Int -> Int -> String -> String

ลายเซ็นของแสดงพารามิเตอร์อินพุตสามตัวและประเภทส่งคืนหนึ่งรายการ

ภาพประกอบ

> String.slice 0 13 "TutorialsPoint"
"TutorialsPoin" : String

ประกอบด้วย

ฟังก์ชันนี้จะคืนค่า True หากสตริงที่สองมีสตริงแรก

ไวยากรณ์

String.contains string1 string2

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.contains
<function> : String -> String -> Bool

ลายเซ็นของการแสดงประเภทผลตอบแทนบูลและพารามิเตอร์อินพุตสองตัว

ภาพประกอบ

> String.contains "Point" "TutorialsPoint"
True : Bool

toInt

ฟังก์ชันนี้จะแปลงสตริงเป็น int

ไวยากรณ์

String.toInt string_value

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.toInt
<function> : String -> Result.Result String Int

เนื่องจาก toInt สามารถส่งคืนข้อผิดพลาดประเภทการส่งคืนคือ Result ซึ่งเป็น String หรือ Int

ภาพประกอบ

> String.toInt "20"
Ok 20 : Result.Result String Int
> String.toInt "abc"
Err "could not convert string 'abc' to an Int" : Result.Result String Int

ลอย

ฟังก์ชันนี้จะแปลงสตริงให้เป็นโฟลต

ไวยากรณ์

String.toFloat string_value

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.toFloat
<function> : String -> Result.Result String Float

เนื่องจาก toFloat สามารถส่งคืนข้อผิดพลาดประเภทการส่งคืนคือ Result ซึ่งเป็น String หรือ Float

ภาพประกอบ

> String.toFloat "20.50"
Ok 20.5 : Result.Result String Float
> String.toFloat "abc"
Err "could not convert string 'abc' to a Float" : Result.Result String Float

จากชาร์

ฟังก์ชันนี้สร้างสตริงจากอักขระที่กำหนด

ไวยากรณ์

String.fromChar character_value

ในการตรวจสอบลายเซ็นของประเภทฟังก์ชันต่อไปนี้ใน elm REPL -

> String.fromChar
<function> : Char -> String

ลายเซ็นแสดงสตริงเป็นชนิดส่งคืนและอินพุตเป็นประเภท Char

ภาพประกอบ

> String.fromChar 'c'
"c" : String

toList

ฟังก์ชันนี้จะแปลงสตริงเป็นรายการอักขระ

ไวยากรณ์

String.toList string_value

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.toList
<function> : String -> List Char

ลายเซ็นแสดงฟังก์ชันส่งคืนรายการอักขระและรับข้อมูลสตริง

ภาพประกอบ

> String.toList "tutorialspoint"
['t','u','t','o','r','i','a','l','s','p','o','i','n','t'] : List Char

fromList

ฟังก์ชันนี้จะแปลงรายการอักขระเป็นสตริง

ไวยากรณ์

String.fromList list_of_characters

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.fromList
<function> : List Char -> String

ลายเซ็นแสดงฟังก์ชันส่งคืนรายการอักขระและรับข้อมูลสตริง

ภาพประกอบ

> String.fromList ['h','e','l','l','o']
"hello" : String

ไปที่ด้านบน

ฟังก์ชันนี้จะแปลงสตริงเป็นตัวพิมพ์ใหญ่ทั้งหมด

ไวยากรณ์

String.toUpper String_value

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.toUpper
<function> : String -> String

ภาพประกอบ

> String.toUpper "hello"
"HELLO" : String

toLower

ฟังก์ชันนี้จะแปลงสตริงเป็นตัวพิมพ์เล็กทั้งหมด

ไวยากรณ์

String.toLower String_value

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.toLower
<function> : String -> String

ภาพประกอบ

> String.toLower "AbCd"
"abcd" : String

ตัดแต่ง

ฟังก์ชันนี้กำจัดช่องว่างทั้งสองด้านของสตริง

ไวยากรณ์

String.trim String_value

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.trim
<function> : String -> String

ภาพประกอบ

> String.trim "tutorialspoint "
"tutorialspoint" : String

กรอง

ฟังก์ชันนี้จะกรองชุดอักขระจากสตริงอินพุต เก็บเฉพาะอักขระที่ผ่านการทดสอบ

ไวยากรณ์

String.filter test_function string_value

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.filter
<function> : (Char -> Bool) -> String -> String

ลายเซ็นแสดงตัวกรองรับพารามิเตอร์อินพุตสองพารามิเตอร์และส่งคืนสตริง พารามิเตอร์แรกคือฟังก์ชันซึ่งมี Char อินพุตและส่งคืน Bool

ภาพประกอบ

ในตัวอย่างเรากำลังส่งChar.isUpperเป็นพารามิเตอร์เพื่อกรองวิธีการ จะส่งคืนอักขระตัวพิมพ์ใหญ่ทั้งหมดตามที่แสดงด้านล่าง

> import Char
> String.filter Char.isUpper "abcDEF"
"DEF" : String

แผนที่

ฟังก์ชันนี้รับสตริงและแปลงอักขระทุกตัวในสตริง

ไวยากรณ์

String.filter mapping_function string_value

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> String.map
<function> : (Char -> Char) -> String -> String

ภาพประกอบ

ตัวอย่างต่อไปนี้แทนที่อักขระ o ด้วย @ -

> String.map (\c -> if c == 'o' then '@' else c) "TutorialsPoint"
"Tut@rialsP@int" : String

สามารถใช้โครงสร้างข้อมูล List, Tuples และ Record เพื่อจัดเก็บชุดค่าต่างๆ

บทนี้จะกล่าวถึงวิธีการใช้รายการใน Elm

รายการคือชุดของค่าที่เป็นเนื้อเดียวกัน ค่าในรายการต้องเป็นชนิดข้อมูลเดียวกัน

พิจารณาข้อ จำกัด ต่อไปนี้ในขณะที่ใช้ตัวแปรเพื่อเก็บค่า -

  • ตัวแปรเป็นสเกลาร์ในธรรมชาติ กล่าวอีกนัยหนึ่งในขณะที่ประกาศตัวแปรสามารถเก็บค่าได้เพียงค่าเดียว ซึ่งหมายความว่าในการจัดเก็บค่า n ในโปรแกรมจำเป็นต้องมีการประกาศตัวแปร n ดังนั้นการใช้ตัวแปรจึงไม่สามารถทำได้เมื่อจำเป็นต้องจัดเก็บชุดค่าที่มากขึ้น

  • ตัวแปรในโปรแกรมได้รับการจัดสรรหน่วยความจำตามลำดับแบบสุ่มจึงทำให้ดึง / อ่านค่าตามลำดับการประกาศได้ยาก

ไวยากรณ์

List_name = [value1,value2,value3.....valuen]

ภาพประกอบ

ตัวอย่างต่อไปนี้แสดงวิธีใช้รายการใน Elm ลองใช้ตัวอย่างนี้ใน elm REPL -

> myList1 = [10,20,30]
[10,20,30] : List number
> myList2 = ["hello","world"]
["hello","world"] : List String

หากเราลองเพิ่มค่าประเภทต่างๆลงในรายการคอมไพเลอร์จะแสดงข้อผิดพลาดประเภทไม่ตรงกัน ดังแสดงด้านล่าง

> myList = [1,"hello"]
-- TYPE MISMATCH 
--------------------------------------------- 
repl-temp-000.elm

The 1st and 2nd entries in this list are different types of values.

4| [1,"hello"]
^^^^^^^
The 1st entry has this type:
   number
But the 2nd is:
   String

แสดงรายการการดำเนินงาน

ตารางต่อไปนี้แสดงการดำเนินการทั่วไปในรายการ -

ซีเนียร์ไม่มี วิธี คำอธิบาย
1 isEmpty: รายการ a -> Bool ตรวจสอบว่ารายการว่างเปล่า
2 ย้อนกลับ: รายการ a -> Bool ย้อนกลับรายการอินพุต
3 ความยาว: List a -> Int ส่งคืนขนาดของรายการ
4 สูงสุด: รายการเทียบเคียง -> อาจจะเทียบได้ คืนค่าสูงสุด
5 ขั้นต่ำ: เทียบเคียงรายการ -> อาจจะเทียบได้ คืนค่าขั้นต่ำ
6 ผลรวม: หมายเลขรายการ -> หมายเลข ส่งคืนผลรวมขององค์ประกอบทั้งหมดในรายการ
7 สินค้า: เลขที่รายการ -> เลขที่ ตรวจสอบว่ารายการว่างเปล่า
8 เรียงลำดับ: รายการเทียบเคียง -> เทียบเคียงรายการ เรียงลำดับรายการจากน้อยไปมาก
9 concat: รายการ (List a) -> List a รวมรายการต่างๆเข้าด้วยกัน
10 ผนวก: List a -> List a -> List a รวมสองรายการเข้าด้วยกัน
11 ช่วง: Int -> Int -> รายการ Int ส่งคืนรายการตัวเลขตั้งแต่ต้นจนจบ
12 ตัวกรอง: (a -> Bool) -> List a -> List a กรองรายการค่าจากรายการอินพุต
13 หัว: รายการ a -> อาจจะอาจจะเป็น ส่งคืนองค์ประกอบแรกจากรายการ
14 หาง: รายการ a -> อาจจะบางที (รายการ a) ส่งคืนองค์ประกอบทั้งหมดยกเว้นส่วนหัว

มันว่างเปล่า

ฟังก์ชันนี้จะคืนค่าจริงหากรายการว่างเปล่า

ไวยากรณ์

List.isEmpty list_name

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> List.isEmpty
<function> : List a -> Bool

ภาพประกอบ

> List.isEmpty
<function> : List a -> Bool

> List.isEmpty [10,20,30]
False : Bool

ย้อนกลับ

ฟังก์ชันนี้จะย้อนกลับรายการ

ไวยากรณ์

List.reverse list_name

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> List.reverse
<function> : List a -> List a

ภาพประกอบ

> List.reverse [10,20,30]
[30,20,10] : List number

ความยาว

ฟังก์ชันนี้จะส่งกลับความยาวของรายการ

ไวยากรณ์

List.length list_name

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> List.length
<function> : List a -> Int

ภาพประกอบ

> List.length [10,20,30]
3 : Int

ขีดสุด

ฟังก์ชันนี้ส่งคืนองค์ประกอบสูงสุดในรายการที่ไม่ว่างเปล่า

ไวยากรณ์

List.maximum list_name

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> List.maximum
<function> : List comparable -> Maybe.Maybe comparable

ภาพประกอบ

> List.maximum [10,20,30]
Just 30 : Maybe.Maybe number
> List.maximum []
Nothing : Maybe.Maybe comparable

ขั้นต่ำ

ฟังก์ชันนี้ส่งคืนองค์ประกอบขั้นต่ำในรายการที่ไม่ว่างเปล่า

ไวยากรณ์

List.minimum list_name

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> List.minimum
<function> : List comparable -> Maybe.Maybe comparable

ภาพประกอบ

> List.minimum [10,20,30]
Just 10 : Maybe.Maybe number

ผลรวม

ฟังก์ชันนี้ส่งคืนผลรวมขององค์ประกอบทั้งหมดในรายการ

ไวยากรณ์

List.sum list_name

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> List.sum
<function> : List number -> number

ภาพประกอบ

> List.sum [10,20,30]
60 : number

ผลิตภัณฑ์

ฟังก์ชันนี้ส่งคืนผลคูณขององค์ประกอบทั้งหมดในรายการ

ไวยากรณ์

List.product list_name

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

<function>  : List number ->  number

ภาพประกอบ

List.product [10,20,30]
6000 : number

เรียงลำดับ

ฟังก์ชันนี้จะเรียงลำดับค่าจากต่ำสุดไปสูงสุดในรายการ

ไวยากรณ์

List.sort list_name

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> List.sort
<function> : List comparable -> List comparable

ภาพประกอบ

> List.sort [10,20,30]
[10,20,30] : List number

concat

ฟังก์ชันนี้จะรวมรายการต่างๆเข้าด้วยกันเป็นรายการเดียว

ไวยากรณ์

List.concat [ [list_name1],[list_name2],[list_name3],.....[list_nameN] ]

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> List.concat
<function> : List (List a) -> List a

ภาพประกอบ

> List.concat [[10,20], [30,40],[50,60]]
[10,20,30,40,50,60] : List number

ผนวก

ฟังก์ชันนี้รวมสองรายการเข้าด้วยกัน

ไวยากรณ์

List.append [list_name1] [list_name2]

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> List.append
<function> : List a -> List a -> List a

ภาพประกอบ

> List.append [10,20] [30,40]
[10,20,30,40] : List number

นอกจากนี้ยังสามารถใช้ตัวดำเนินการ ++ เพื่อต่อท้ายรายการกับอีกรายการได้ สิ่งนี้แสดงในตัวอย่างด้านล่าง -

> [10.1,20.2] ++ [30.3,40.4]
[10.1,20.2,30.3,40.4] : List Float

พิสัย

ฟังก์ชันนี้จะสร้างรายการตัวเลขโดยทุกองค์ประกอบจะเพิ่มขึ้นทีละรายการ จำนวนต่ำสุดและสูงสุดที่ควรอยู่ในรายการจะถูกส่งไปยังฟังก์ชัน

ไวยากรณ์

List.range start_range end_range

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> List.range
<function> : Int -> Int -> List Int

ภาพประกอบ

> List.range 1 10
[1,2,3,4,5,6,7,8,9,10] : List Int

กรอง

ฟังก์ชันนี้จะกรองชุดของค่าจากรายการอินพุต เก็บเฉพาะค่าที่ผ่านการทดสอบ

ไวยากรณ์

List.filter test_function input_list

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> List.filter
<function> : (a -> Bool) -> List a -> List a

ภาพประกอบ

ตัวอย่างต่อไปนี้กรองเลขคู่ทั้งหมดจากรายการอินพุต

> List.filter (\n -> n%2==0) [10,20,30,55]
[10,20,30] : List Int

ศีรษะ

ฟังก์ชันนี้จะส่งคืนองค์ประกอบแรกจากรายการอินพุต

ไวยากรณ์

List.head input_list

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> List.head
<function> : List a -> Maybe.Maybe a

ภาพประกอบ

> List.head [10,20,30,40]
Just 10 : Maybe.Maybe number
> List.head []
Nothing : Maybe.Maybe a

หาง

ฟังก์ชันนี้จะส่งคืนองค์ประกอบทั้งหมดหลังจากอันดับแรกในรายการ

ไวยากรณ์

List.tail input_list

ในการตรวจสอบลายเซ็นของฟังก์ชันพิมพ์สิ่งต่อไปนี้ใน elm REPL -

> List.tail
<function> : List a -> Maybe.Maybe (List a)

ภาพประกอบ

> List.tail [10,20,30,40,50]
Just [20,30,40,50] : Maybe.Maybe (List number)
> List.tail [10]
Just [] : Maybe.Maybe (List number)
> List.tail []
Nothing : Maybe.Maybe (List a)

การใช้ตัวดำเนินการจุดด้อย

ตัวดำเนินการจุดด้อย (::) เพิ่มองค์ประกอบที่ด้านหน้ารายการ

ภาพประกอบ

> 10::[20,30,40,50]
[10,20,30,40,50] : List number

องค์ประกอบใหม่ที่จะเพิ่มและชนิดข้อมูลของค่าในรายการต้องตรงกัน คอมไพเลอร์แสดงข้อผิดพลาดหากชนิดข้อมูลไม่ตรงกัน

> [1,2,3,4]::[5,6,7,8]
-- TYPE MISMATCH ---------------------------------
------------ repl-temp-000.elm

The right side of (::) is causing a type mismatch.

3| [1,2,3,4]::[5,6,7,8]
			  ^^^^^^^^^
(::) is expecting the right side to be a:

   List (List number)

But the right side is:

   List number
Hint: With operators like (::) I always check the left side first. If it seems fine, 
I assume it is correct and check the right side. So the 
problem may be in how the left and right arguments interact.

รายการไม่เปลี่ยนรูป

ให้เราตรวจสอบว่ารายการไม่เปลี่ยนรูปใน Elm หรือไม่ รายการแรกmyListเมื่อตัดแบ่งที่มีมูลค่า 1 สร้างรายการใหม่และถูกส่งกลับไปmyListCopy ดังนั้นหากเราแสดงรายการเริ่มต้นค่าของมันจะไม่เปลี่ยนแปลง

> myList = [10,20,30]
[10,20,30] : List number
> myListCopy = 1::myList
[1,10,20,30] : List number
> myList
[10,20,30] : List number
>myList == myListCopy
False : Bool

ในบางครั้งอาจจำเป็นต้องจัดเก็บคอลเล็กชันของค่าประเภทต่างๆ Elm ทำให้เรามีโครงสร้างข้อมูลที่เรียกว่า tuple ที่ทำหน้าที่นี้

ทูเปิลแสดงถึงคอลเล็กชันค่าที่แตกต่างกัน กล่าวอีกนัยหนึ่ง tuples เปิดใช้งานการจัดเก็บหลายเขตข้อมูลประเภทต่างๆ ทูเปิลเก็บค่าจำนวนคงที่ Tuples มีประโยชน์เมื่อคุณต้องการส่งคืนค่าหลายค่าประเภทต่างๆจากฟังก์ชัน โครงสร้างข้อมูลเหล่านี้ไม่เปลี่ยนรูปเหมือนชนิดอื่น ๆ ใน elm

ไวยากรณ์

(data1,data2)

ตัวอย่างง่ายๆแสดงไว้ด้านล่าง -

> ("TuotrialsPoint",5,True,"Hyderabad")
("TuotrialsPoint",5,True,"Hyderabad") : ( String, number, Bool, String )

ในส่วนต่อไปเราจะเรียนรู้เกี่ยวกับการดำเนินการทูเพิลต่างๆ

อันดับแรก

การดำเนินการนี้แยกค่าแรกออกจากทูเปิล

ไวยากรณ์

Tuple.first tuple_name
> Tuple.first
<function> : ( a1, a2 ) -> a1

ภาพประกอบ

> Tuple.first (10,"hello")
10 : number

วินาที

second การดำเนินการทูเพิลดึงค่าที่สองออกจากทูเปิล

ไวยากรณ์

Tuple.second tuple_name
> Tuple.second
<function> : ( a1, a2 ) -> a2

ภาพประกอบ

> Tuple.second (10,"hello")
"hello" : String

รายชื่อ tuples

รายการสามารถจัดเก็บ Tuples หากมีการใช้ tuples ภายในรายการตรวจสอบให้แน่ใจว่าทั้งหมดเป็นประเภทข้อมูลเดียวกันและมีพารามิเตอร์จำนวนเท่ากัน

ภาพประกอบ

> [("hello",20),("world",30)]
[("hello",20),("world",30)] : List ( String, number )

Tuple พร้อมฟังก์ชั่น

ฟังก์ชันสามารถส่งคืนสิ่งที่มีค่า นอกจากนี้ tuples สามารถส่งผ่านเป็นพารามิเตอร์ไปยังฟังก์ชันได้

ภาพประกอบ 1

ตัวอย่างต่อไปนี้กำหนดฟังก์ชัน fn_checkEven ฟังก์ชันนี้ยอมรับค่าจำนวนเต็มเป็นพารามิเตอร์และส่งคืนทูเพิล

> fn_checkEven no = \
   if no%2 == 0 then \
      (True,"The no is Even")\
   else \
      (False,"No is not even")
<function> : Int -> ( Bool, String )
> fn_checkEven 10
(True,"The no is Even") : ( Bool, String )
> fn_checkEven 11
(False,"No is not even") : ( Bool, String )
>

ภาพประกอบ 2

ต่อไปนี้ส่งทูเพิลเป็นพารามิเตอร์ไปยังฟังก์ชัน

> fn_add (a,b) = \
| a+b
<function> : ( number, number ) -> number
> fn_add (10,20)
30 : number

ฟังก์ชันfn_addรับทูเปิลที่มีค่าตัวเลข 2 ค่าและส่งกลับผลรวม

การทำลายล้าง

การทำลายโครงสร้างเกี่ยวข้องกับการทำลายทูเพิลให้เป็นมูลค่าของแต่ละบุคคล ในการเข้าถึงค่าแต่ละค่าในทูเปิลที่มีองค์ประกอบสามอย่างขึ้นไปเราใช้การทำลายโครงสร้าง ที่นี่เรากำหนดแต่ละค่าในทูเพิลให้กับตัวแปรต่างๆ การใช้ _ one สามารถกำหนดตัวยึดตำแหน่งสำหรับค่าที่จะถูกละเว้นหรือข้ามไป

ภาพประกอบ

> (first,_,_) = (10,20,30)
10 : number
> first
10 : number

ภาพประกอบ

ในตัวอย่างนี้เราจะใช้ let..in block syntax เพื่อทำลายโครงสร้าง บล็อก let มีตัวแปรและในบล็อกมีนิพจน์ที่ควรได้รับการประเมินและค่าที่ควรส่งคืน

> t1 = (10,20,30)
(10,20,30) : ( number, number1, number2 )
> let \
(a,b,c) = t1 \
in\
a + b +c
60 : number

เรากำลังประกาศตัวแปร abc ใน let clause และเข้าถึงโดยใช้ใน clause

โครงสร้างข้อมูลเร็กคอร์ดใน Elm สามารถใช้เพื่อแสดงข้อมูลเป็นคู่คีย์ - ค่า สามารถใช้บันทึกเพื่อจัดระเบียบข้อมูลที่เกี่ยวข้องเพื่อให้เข้าถึงและอัปเดตข้อมูลได้ง่าย ระเบียน Elm คล้ายกับวัตถุใน JavaScript องค์ประกอบข้อมูลในระเบียนเรียกว่าเขตข้อมูล

การกำหนดระเบียน

ใช้ไวยากรณ์ต่อไปนี้เพื่อกำหนดระเบียน -

ไวยากรณ์

record_name = {fieldname1 = value1, fieldname2 = value2....fieldnameN = valueN}

บันทึกสามารถจัดเก็บข้อมูลได้หลายประเภท ชื่อฟิลด์ในเรกคอร์ดต้องเป็นไปตามกฎทั่วไปสำหรับการตั้งชื่อตัวระบุ Elm

การเข้าถึงค่าบันทึก

ใช้ไวยากรณ์ต่อไปนี้เพื่อเข้าถึงแต่ละฟิลด์ในระเบียน

ไวยากรณ์

record_name.fieldname

หรือ

.fieldname record_name

ภาพประกอบ

ลองทำสิ่งต่อไปนี้ใน Elm REPL -

> company = {name="TutorialsPoint",rating=4.5}
{ name = "TutorialsPoint", rating = 4.5 } : { name : String, rating : Float }
> company.name
"TutorialsPoint" : String
> .rating company
4.5 : Float

ใช้บันทึกกับรายการ

บันทึกสามารถจัดเก็บไว้ในรายการ ค่าฟิลด์ทั้งหมดของเรกคอร์ดควรเป็นประเภทเดียวกัน

ไวยากรณ์

list_name = [ {field_name1 = value1},{field_name1 = value2}]

หรือ

list_name = [record_name1, record_name2, record_name3....record_nameN]

ภาพประกอบ

ลองทำสิ่งต่อไปนี้ใน Elm REPL -

> [{name = "Mohtashim"},{name = "kannan"}]
[{ name = "Mohtashim" },{ name = "kannan" }] : List { name : String }
> record1 = {name = "FirstRecord"}
{ name = "FirstRecord" } : { name : String }
> record2 = {name = "SecondRecord"}
{ name = "SecondRecord" } : { name : String }
> recordList = [record1,record2]
[{ name = "FirstRecord" },{ name = "SecondRecord" }] : List { name : String }

อัปเดตบันทึก

บันทึกไม่เปลี่ยนรูปใน Elm เมื่อมีการอัปเดตระเบียนระเบียนใหม่ที่มีค่าที่อัปเดตจะถูกส่งกลับ ฟิลด์สามารถเก็บค่าของประเภทอื่นได้เมื่ออัปเดตเรกคอร์ด

ไวยากรณ์

{record_name | field_name1 = new_value1, field_name2 = new_value2,field_name3 = new_value3....field_nameN = new_valueN}

ภาพประกอบ

ลองทำสิ่งต่อไปนี้ใน Elm REPL -

> record1 = {name="FirstRecord"}
{ name = "FirstRecord" } : { name : String }
> record1_updated = {record1 | name = "FirstRecordUpdate"}
{ name = "FirstRecordUpdate" } : { name : String }
> record1
{ name = "FirstRecord" } : { name : String }
> record1 == record1_updated
False : Bool

ภาพประกอบ

ตัวอย่างต่อไปนี้อัพเดตหลายฟิลด์ของเรกคอร์ด ลองทำสิ่งต่อไปนี้ใน Elm REPL -

> record3 = {a = 1,b = 2,c = 3,d = 4,e = 5}
{ a = 1, b = 2, c = 3, d = 4, e = 5 }
: { a : number, b : number1, c : number2, d : number3, e : number4 }
> record4 = {record3 | d=400 ,e=500}
{ a = 1, b = 2, c = 3, d = 400, e = 500 }
: { a : number2, b : number3, c : number4, d : number, e : number1 }
>

ประเภทนามแฝง

Type alias กำหนดสคีมาสำหรับเร็กคอร์ด กล่าวอีกนัยหนึ่งนามแฝงประเภทกำหนดฟิลด์ที่สามารถจัดเก็บเรกคอร์ดและประเภทของค่าที่ฟิลด์เหล่านี้สามารถจัดเก็บได้ ดังนั้นโปรแกรมเมอร์จะไม่พลาดแอตทริบิวต์ใด ๆ ขณะกำหนดค่า

ไวยากรณ์

type alias alias_name = {field_name1:data_type,field_name2:data_type,....field_nameN:data_type}

ภาพประกอบ

ดำเนินการต่อไปนี้ใน Elm REPL -

> type alias Developer = { name:String,location:String,age:Int}
> dev1 = Developer "kannan" "Mumbai" 20
{ name = "kannan", location = "Mumbai", age = 20 } : Repl.Developer
> dev2 = Developer "mohtashim" "hyderabad" 20
{ name = "mohtashim", location = "hyderabad", age = 20 } : Repl.Developer
>

ตอนนี้ถ้าคุณลืมพิมพ์ตำแหน่งและอายุคำสั่งจะส่งคืนฟังก์ชันซึ่งมีพารามิเตอร์อินพุตสำหรับฟิลด์ตำแหน่งและอายุ

> dev3 = Developer "Bhagavati"
<function> : String -> Int -> Repl.Developer
We can invoke the function as shown below and pass to it the values for location and age fields.
> dev3 "Pune" 25
{ name = "Bhagavati", location = "Pune", age = 25 } : Repl.Developer

ข้อผิดพลาดคือเงื่อนไขที่ไม่คาดคิดในโปรแกรม ข้อผิดพลาดอาจเกิดขึ้นในเวลาคอมไพล์หรือรันไทม์ ข้อผิดพลาดของเวลาคอมไพล์เกิดขึ้นระหว่างการคอมไพล์โปรแกรม (ตัวอย่างเช่นข้อผิดพลาดในไวยากรณ์ของโปรแกรม) ในขณะที่ข้อผิดพลาดรันไทม์เกิดขึ้นระหว่างการทำงานของโปรแกรม ซึ่งแตกต่างจากภาษาโปรแกรมอื่น ๆ Elm ไม่โยนข้อผิดพลาดรันไทม์

พิจารณาแอปพลิเคชันที่ยอมรับอายุของผู้ใช้ แอปพลิเคชันควรแสดงข้อผิดพลาดหากอายุเป็นศูนย์หรือติดลบ ในกรณีนี้แอปพลิเคชัน Elm สามารถใช้แนวคิดของการจัดการข้อผิดพลาดเพื่อเพิ่มข้อผิดพลาดอย่างชัดเจนที่รันไทม์หากผู้ใช้ป้อนค่าศูนย์หรือค่าลบตามอายุ การจัดการข้อผิดพลาดระบุแนวทางการดำเนินการหากมีสิ่งที่ไม่คาดคิดเกิดขึ้นระหว่างการทำงานของโปรแกรม

ภาษาโปรแกรม Elm จัดการข้อผิดพลาดด้วยวิธีต่อไปนี้ -

  • MayBe
  • Result

อาจจะ

พิจารณาคุณสมบัติการค้นหาในแอปพลิเคชัน ฟังก์ชันการค้นหาจะส่งคืนข้อมูลที่เกี่ยวข้องหากพบคีย์เวิร์ดอื่นไม่ส่งคืนข้อมูลใด ๆ กรณีการใช้งานนี้สามารถใช้งานได้ใน Elm โดยใช้ประเภท MayBe

ไวยากรณ์

variable_name:MayBe data_type

ตัวแปรประเภท MayBe สามารถมีค่าใดค่าหนึ่งดังต่อไปนี้ -

  • Just some_Value - ใช้หากมีข้อมูลที่ถูกต้อง

  • Nothing - ใช้หากไม่มีค่าหรือไม่ทราบ ไม่มีสิ่งใดเทียบเท่ากับ null ในภาษาโปรแกรมอื่น ๆ

ภาพประกอบ

ตัวอย่างต่อไปนี้แสดงวิธีใช้ประเภท MayBe กับตัวแปรและฟังก์ชัน

Step 1 - สร้างไฟล์ MayBeDemo.elm ไฟล์และเพิ่มรหัสต่อไปนี้

-- MayBeDemo.elm
module MayBeDemo exposing(..)
import Maybe

--declaring a MayBe variable and assigning value to it
userName : Maybe String
userName = Just "Mohtashim"

--declaring a MayBe variable and assigning value to it
userAge :Maybe Int
userAge = Just 20

--declaring a MayBe variable and assigning value to it
userSalary:Maybe Float
userSalary = Nothing

--declaring a custom type
type Country = India | China | SriLanka

--defining a function that takes a String parameter as input and returns a value of type MayBe

getCountryFromString : String -> Maybe Country
getCountryFromString p =
case p of
   "India"
      -> Just India
   "China"
      -> Just China
   "SriLanka"
      -> Just SriLanka
   _
      -> Nothing

Step 2 - นำเข้าโมดูลใน elm repl และดำเนินการตามที่ระบุด้านล่าง

E:\ElmWorks\ErroApp> elm repl
---- elm-repl 0.18.0 -----------------------------------------------------------
:help for help, :exit to exit, more at 
      
        -------------------------------------------------------------------------------- > import MayBeDemo exposing(..) > userName Just "Mohtashim" : Maybe.Maybe String > userAge Just 20 : Maybe.Maybe Int > userSalary Nothing : Maybe.Maybe Float > getCountryFromString "India" Just India : Maybe.Maybe MayBeDemo.Country > getCountryFromString "india" Nothing : Maybe.Maybe MayBeDemo.Country 
      

ฟังก์ชันจะตรวจสอบว่าค่าที่ส่งผ่านไปยังฟังก์ชันเป็นอินเดียหรือจีนหรือศรีลังกา หากค่าของพารามิเตอร์ไม่ตรงกับค่าใด ๆ เหล่านี้จะไม่ส่งคืนค่าอะไรเลย

ผลลัพธ์

พิจารณาตัวอย่างที่แอปพลิเคชันจำเป็นต้องตรวจสอบเงื่อนไขบางอย่างและเพิ่มข้อผิดพลาดหากเงื่อนไขไม่เป็นไปตามเงื่อนไข ประเภทผลลัพธ์สามารถใช้เพื่อบรรลุเป้าหมายนี้ ควรใช้ประเภทผลลัพธ์หากแอปพลิเคชันต้องการเพิ่มข้อผิดพลาดอย่างชัดเจนและแสดงรายละเอียดเกี่ยวกับสิ่งที่ผิดพลาด

ไวยากรณ์

การประกาศประเภทผลลัพธ์ใช้พารามิเตอร์สองตัวคือชนิดข้อมูลของข้อผิดพลาด (โดยปกติจะเป็นสตริง) และชนิดข้อมูลของผลลัพธ์ที่จะส่งคืนหากทุกอย่างเรียบร้อยดี

type Result error_type data_value_type
= Ok data_value
| Err error_message

ชนิดผลลัพธ์จะส่งคืนค่าใดค่าหนึ่งต่อไปนี้ -

  • ตกลง some_value - แสดงถึงผลลัพธ์ที่จะส่งคืน

  • Err - แสดงข้อความแสดงข้อผิดพลาดที่จะส่งคืนหากเงื่อนไขที่คาดไว้ไม่เป็นไปตามเงื่อนไข

ภาพประกอบ 1

ลองใช้ตัวอย่างต่อไปนี้ใน Elm REPL -

> String.toInt
<function> : String -> Result.Result String Int
-- successful result
> String.toInt "10"
Ok 10 : Result.Result String Int
-- unsuccessful result , Error
> String.toInt "a"
Err "could not convert string 'a' to an Int" : Result.Result String Int

ฟังก์ชัน String.toInt จะส่งกลับค่าจำนวนเต็มหากพารามิเตอร์ที่ส่งผ่านนั้นถูกต้อง หากพารามิเตอร์ไม่ใช่ตัวเลขฟังก์ชันจะส่งกลับข้อผิดพลาด

ภาพประกอบ 2

ตัวอย่างต่อไปนี้ยอมรับอายุเป็นพารามิเตอร์ ฟังก์ชันจะส่งคืนอายุหากอยู่ระหว่าง 0 ถึง 135 มิฉะนั้นจะส่งคืนข้อความแสดงข้อผิดพลาดที่เหมาะสม

Step 1 - สร้างไฟล์ ResultDemo.elm และเพิ่มรหัสต่อไปนี้

--ResultDemo.elm
module ResultDemo exposing(..)

userId : Result String Int
userId = Ok 10

emailId : Result String Int
emailId = Err "Not valid emailId"

isReasonableAge : String -> Result String Int
isReasonableAge input =
   case String.toInt input of
      Err r ->
         Err "That is not a age!"

   Ok age ->
      if age < 0 then
         Err "Please try again ,age can't be negative"
      else if age > 135 then
         Err "Please try agian,age can't be this big.."

   else
      Ok age

Step 2 - นำเข้าโมดูลในแพ็คเกจ elm และดำเนินการตามที่ระบุด้านล่าง

E:\ElmWorks\ElmRepo\15_ErrorHandling\15_Code> elm repl
---- elm-repl 0.18.0 -----------------------------------------------------------
:help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
--------------------------------------------------------------------------------
> import ResultDemo exposing (..)
> userId
Ok 10 : Result.Result String Int
> emailId
Err "Not valid emailId" : Result.Result String Int
> isReasonableAge "10"
Ok 10 : Result.Result String Int
> isReasonableAge "abc"
Err "That is not a age!" : Result.Result String Int

ในบทนี้เราจะพูดถึงวิธีมาตรฐานในการสร้างแอปพลิเคชันในแพลตฟอร์ม Elm Elm ใช้รูปแบบสถาปัตยกรรมคล้ายกับรูปแบบ Model-View-Controller

ต่อไปนี้เป็นสี่ส่วนหลักของสถาปัตยกรรม Elm

  • Model
  • View
  • Message
  • Update

สถาปัตยกรรม Elm ทำงานอย่างไร

modelมีสถานะของแอปพลิเคชัน ตัวอย่างเช่นหากแอปพลิเคชันแสดงรายชื่อลูกค้ารัฐจะมีข้อมูลลูกค้าแต่ละราย ในการแสดงสถานะในลักษณะที่เรียบร้อยกviewต้องสร้าง / html เมื่อผู้ใช้โต้ตอบกับมุมมองโดยการกดปุ่มหรือพิมพ์ข้อมูลในรูปแบบมุมมองจะสร้างสัญญาณที่เรียกว่าmessages. ข้อความจะถูกส่งไปยังไฟล์updateวิธีการซึ่งประเมินข้อความและดำเนินการอย่างเหมาะสม ดังนั้นวิธีการอัพเดตจะสร้างโมเดลใหม่

โมเดลใหม่สร้างมุมมองใหม่ มุมมองจะนำไปสู่การโต้ตอบใหม่จากผู้ใช้ไปยังข้อความสัญญาณซึ่งจะไปที่ฟังก์ชันการอัปเดต นอกจากนี้ฟังก์ชันจะสร้างโมเดลใหม่ ดังนั้นวงจรจะเกิดขึ้นซ้ำตามที่แสดงในแผนภาพด้านบน

รุ่น

โมเดลเกี่ยวข้องกับสถานะของแอปพลิเคชัน ไวยากรณ์สำหรับการกำหนด Model แสดงไว้ด้านล่าง -

-- Model syntax

type alias Model = {
   property1:datatype,
   proptery2:datatype
...
}

ในการสร้างแบบจำลองก่อนอื่นเราต้องสร้างเทมเพลตที่มีคุณสมบัติทั้งหมดที่ต้องการ คุณสมบัติแต่ละรายการระบุสถานะของแอ็พพลิเคชัน

ดู

View เป็นการแสดงสถานะแอปพลิเคชันด้วยภาพ View รู้วิธีนำข้อมูลและสร้างหน้าเว็บออกจากข้อมูล เมื่อผู้ใช้โต้ตอบกับ View ผู้ใช้สามารถปรับแต่งสถานะโดยการสร้างข้อความ ไวยากรณ์สำหรับการกำหนด View แสดงไว้ด้านล่าง -

--View Syntax
view model =some_implementation

ข้อความ

ข้อความคือคำขอจากผู้ใช้เพื่อแก้ไขสถานะแอปพลิเคชัน ข้อความจะถูกส่งเป็นพารามิเตอร์ไปยังฟังก์ชันอัพเดต

--Message Syntax
type Message = Message1 |Message2 ...

ไวยากรณ์แสดงประเภทข้อความ แอปพลิเคชัน elm จะแก้ไขสถานะตามข้อความที่ส่งไป การตัดสินใจเหล่านี้เกิดขึ้นในวิธีการอัปเดต

อัปเดต

ฟังก์ชันอัพเดตจะตีความข้อความซึ่งส่งผ่านเป็นพารามิเตอร์ไปและอัพเดตโมเดล

--Update Syntax
update Message_type model =
   some_implementation

ใช้ฟังก์ชันอัพเดต Message และ Model เป็นพารามิเตอร์

ตัวจัดการแพ็คเกจคือเครื่องมือบรรทัดคำสั่งที่ทำให้กระบวนการติดตั้งอัปเกรดกำหนดค่าและลบแพ็กเกจในแอปพลิเคชันของคุณโดยอัตโนมัติ

เช่นเดียวกับ JavaScript มีผู้จัดการแพคเกจที่เรียกว่า NPM เอล์มมีผู้จัดการแพคเกจที่เรียกว่าเอล์มแพคเกจ

ตัวจัดการแพ็คเกจดำเนินการสามงานต่อไปนี้ -

  • ติดตั้งการอ้างอิงทั้งหมดที่แอปพลิเคชัน elm ต้องการ
  • เผยแพร่แพ็คเกจที่กำหนดเอง
  • กำหนดเวอร์ชันของแพ็กเกจของคุณเมื่อคุณพร้อมที่จะเผยแพร่และอัปเดต

คำสั่ง Elm Package Manager

ตารางต่อไปนี้แสดงรายการคำสั่งตัวจัดการแพ็คเกจ Elm ต่างๆ -

เลขที่ คำสั่ง ไวยากรณ์ คำอธิบาย
1 ติดตั้ง การติดตั้ง elm-package ติดตั้งแพ็คเกจเพื่อใช้ภายในเครื่อง
2 เผยแพร่ elm-package เผยแพร่ เผยแพร่แพ็คเกจของคุณไปยังแค็ตตาล็อกกลาง
3 ชน Elm-package Bump Bumps หมายเลขเวอร์ชันตามการเปลี่ยนแปลงของ API
4 ความแตกต่าง elm-package แตกต่างกัน รับความแตกต่างระหว่างสอง API

ในการเผยแพร่แพ็กเกจของคุณคุณต้องโฮสต์ซอร์สโค้ดบน GitHub และมีเวอร์ชันที่มีป้ายกำกับ git อย่างถูกต้อง ภาพประกอบต่อไปนี้แสดงวิธีใช้ elm-package manager เพื่อดึงการพึ่งพาภายนอก

ภาพประกอบ - กำลังติดตั้งแพ็คเกจ svg

ในตัวอย่างนี้เราจะดูวิธีรวมกราฟิกเวกเตอร์ที่ปรับขนาดได้ (SVG) เข้ากับแอปพลิเคชัน elm

Step 1 - สร้างโฟลเดอร์ elmSvgApp

Step 2 - ติดตั้งแพ็คเกจ svg โดยใช้คำสั่งต่อไปนี้ -

elm-package install elm-lang/svg

Step 3- ติดตั้งสร้างไฟล์ SvgDemo.elm และพิมพ์เนื้อหาที่ระบุด้านล่าง เรานำเข้าโมดูล Svg เพื่อวาดรูปสี่เหลี่ยมขนาด100x100และเติมสีแดง

import Svg exposing (..)
import Svg.Attributes exposing (..)

main =
   svg
   [ width "120"
   , height "120"
   , viewBox "0 0 120 120"
   ]
   [ rect
      [ x "10"
      , y "10"
      , width "100"
      , height "100"
      , rx "15"
      , ry "15"
      ,fill "red"
      ]
      []
   ]

Step 4- ตอนนี้สร้างโครงการโดยใช้ elm make \ SvgDemo.elm สิ่งนี้จะสร้าง index.html ดังที่แสดงด้านล่าง -

ข้อความเป็นส่วนประกอบในสถาปัตยกรรม Elm ส่วนประกอบเหล่านี้สร้างขึ้นโดย View เพื่อตอบสนองต่อการโต้ตอบของผู้ใช้กับอินเทอร์เฟซของแอปพลิเคชัน ข้อความแสดงถึงคำขอของผู้ใช้ในการเปลี่ยนแปลงสถานะของแอปพลิเคชัน

ไวยากรณ์

--Message Syntax
type Message = some_message1 |some_message2 ...|some_messageN

ความผิดหวัง

ตัวอย่างต่อไปนี้เป็นแอปพลิเคชันตัวนับอย่างง่าย แอปพลิเคชันจะเพิ่มและลดค่าของตัวแปรทีละ 1 เมื่อผู้ใช้คลิกที่ปุ่มเพิ่มและลบตามลำดับ

แอปพลิเคชันจะมี 4 องค์ประกอบ ส่วนประกอบอธิบายไว้ด้านล่าง -

ข้อความ

ข้อความสำหรับตัวอย่างนี้จะเป็น -

type Message = Add | Subtract

รุ่น

โมเดลแสดงสถานะของแอปพลิเคชัน ในแอปพลิเคชันตัวนับคำจำกัดความของโมเดลจะได้รับด้านล่าง สถานะเริ่มต้นของตัวนับจะเป็นศูนย์

model = 0

ดู

มุมมองแสดงถึงองค์ประกอบภาพของแอปพลิเคชัน มุมมองประกอบด้วยสองปุ่ม (+) และ (-) ข้อความเพิ่มและลบถูกสร้างขึ้นโดยมุมมองเมื่อผู้ใช้คลิกที่ปุ่ม + และ - ตามลำดับ ค่าที่แก้ไขแล้วของโมเดลจะแสดงโดย View

view model =
-- invoke text function
h1[]
[   div[] [text "CounterApp from TutorialsPoint" ]
   ,button[onClick Subtract] [text "-"]
   ,div[][text (toString model)]
   ,button[onClick Add] [text "+"]
]

อัปเดต

คอมโพเนนต์นี้มีโค้ดที่ควรดำเนินการสำหรับแต่ละข้อความที่สร้างโดยมุมมอง สิ่งนี้แสดงในตัวอย่างด้านล่าง -

update msg model =
case msg of
Add -> model+1
Subtract -> model-1

วางมันทั้งหมดเข้าด้วยกัน

Step 1- สร้างโฟลเดอร์MessagesApp และไฟล์ MessagesDemo.elm

Step 2 - เพิ่มรหัสต่อไปนี้ในไฟล์ elm -

import Html exposing (..)
import Html.Events exposing(onClick)

model = 0 -- Defining the Model

--Defining the View

view model =
   h1[]
   [  div[] [text "CounterApp from TutorialsPoint" ]
      ,button[onClick Subtract] [text "-"]
      ,div[][text (toString model)]
      ,button[onClick Add] [text "+"]
   ]

--Defining the Messages

type Message = Add | Subtract

--Defining Update

update msg model =
case msg of
   Add -> model+1
   Subtract -> model-1

-- Define the main method
main =
   beginnerProgram
   {
      model=model
      ,view=view
      ,update=update
   }

Step 3 - เรียกใช้ไฟล์ elm make commandในเทอร์มินัล elm make command รวบรวมโค้ดและสร้างไฟล์ HTML จากไฟล์. elm ที่สร้างด้านบน

C:\Users\dell\elm\MessagesApp> elm make .\MessageDemo.elm
Some new packages are needed. Here is the upgrade plan.

   Install:
      elm-lang/core 5.1.1
      elm-lang/html 2.0.0
      elm-lang/virtual-dom 2.0.4

Do you approve of this plan? [Y/n] y
Starting downloads...

   ΓùÅ elm-lang/html 2.0.0
   ΓùÅ elm-lang/virtual-dom 2.0.4

ΓùÅ elm-lang/core 5.1.1
Packages configured successfully!
Success! Compiled 38 modules.
Successfully generated index.html

Step 4 - เปิดไฟล์ index.html และตรวจสอบการทำงานตามที่แสดงด้านล่าง -

Elm - คำสั่ง

ในบทก่อนหน้านี้เราได้กล่าวถึงส่วนประกอบต่างๆของสถาปัตยกรรม Elm และหน้าที่ของมัน ผู้ใช้และแอปพลิเคชันสื่อสารกันโดยใช้ข้อความ

พิจารณาตัวอย่างที่แอปพลิเคชันต้องการสื่อสารกับส่วนประกอบอื่น ๆ เช่นเซิร์ฟเวอร์ภายนอก API ไมโครเซอร์วิส ฯลฯ เพื่อตอบสนองคำขอของผู้ใช้ สิ่งนี้สามารถทำได้โดยใช้คำสั่งใน Elm ข้อความและคำสั่งไม่ตรงกัน ข้อความแสดงถึงการสื่อสารระหว่างผู้ใช้ปลายทางและแอปพลิเคชันในขณะที่คำสั่งแสดงถึงวิธีที่แอปพลิเคชัน Elm สื่อสารกับเอนทิตีอื่น คำสั่งถูกทริกเกอร์เพื่อตอบสนองต่อข้อความ

รูปต่อไปนี้แสดงขั้นตอนการทำงานของแอปพลิเคชัน Elm ที่ซับซ้อน -

ผู้ใช้โต้ตอบกับมุมมอง มุมมองจะสร้างข้อความที่เหมาะสมตามการกระทำของผู้ใช้ ส่วนประกอบอัพเดตได้รับข้อความนี้และทริกเกอร์คำสั่ง

ไวยากรณ์

ไวยากรณ์สำหรับการกำหนดคำสั่งมีดังต่อไปนี้ -

type Cmd msg

ข้อความที่สร้างโดยมุมมองจะถูกส่งผ่านไปยังคำสั่ง

ภาพประกอบ

ตัวอย่างต่อไปนี้ส่งคำขอไปยัง API และแสดงผลลัพธ์จาก API

แอปพลิเคชันยอมรับหมายเลขจากผู้ใช้ส่งต่อไปยัง Numbers API API นี้แสดงข้อเท็จจริงที่เกี่ยวข้องกับตัวเลข

ส่วนประกอบต่างๆของแอปพลิเคชันมีดังนี้ -

โมดูล Http

Http Module of Elm ใช้เพื่อสร้างและส่งคำขอ HTTP โมดูลนี้ไม่ได้เป็นส่วนหนึ่งของโมดูลหลัก เราจะใช้ตัวจัดการแพ็คเกจ elm เพื่อติดตั้งแพ็คเกจนี้

API

ในตัวอย่างนี้แอปพลิเคชันจะสื่อสารกับ Numbers API - "http://numbersapi.com/#42".

ดู

มุมมองของแอปพลิเคชันประกอบด้วยกล่องข้อความและปุ่ม

view : Model -> Html Msg
view model =
   div []
      [ h2 [] [text model.heading]
      ,input [onInput Input, value model.input] []
      , button [ onClick ShowFacts ] [ text "show facts" ]
      , br [] []
      , h3 [][text model.factText]
      ]

รุ่น

Model แสดงถึงค่าที่ป้อนโดยผู้ใช้และผลลัพธ์ที่ API จะส่งคืน

type alias Model =
   { heading : String
   , factText : String
   , input :String
   }

ข้อความ

แอปพลิเคชันมีสามข้อความต่อไปนี้ -

  • ShowFacts
  • Input
  • NewFactArrived

เมื่อคลิกที่แสดงข้อเท็จจริงปุ่มShowFactsข้อความจะถูกส่งผ่านไปยังวิธีการปรับปรุง เมื่อผู้ใช้พิมพ์ค่าบางอย่างในกล่องข้อความข้อความอินพุตจะถูกส่งไปยังวิธีการอัปเดต สุดท้ายเมื่อได้รับการตอบกลับของเซิร์ฟเวอร์ Http ข้อความNewFactArrivedจะถูกส่งไปยังการอัปเดต

type Msg
   = ShowFacts
   |Input String
   | NewFactArrived (Result Http.Error String)

อัปเดต

วิธีการอัพเดตจะส่งคืนทูเพิลซึ่งมีอ็อบเจ็กต์โมเดลและคำสั่ง เมื่อผู้ใช้คลิกที่ปุ่มแสดงข้อเท็จจริงข้อความจะถูกส่งไปยังการอัปเดตซึ่งจะเรียกใช้ NumbersAPI

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
   case msg of
      Input newInput ->
      (Model "NumbersApi typing.." "" newInput ,Cmd.none)
      ShowFacts ->
         (model, getRadmonNumberFromAPI model.input)

      NewFactArrived (Ok newFact) ->
         (Model "DataArrived" newFact "", Cmd.none)

      NewFactArrived (Err _) ->
      (model, Cmd.none)

ฟังก์ชันตัวช่วย

ฟังก์ชันตัวช่วยgetRandomNumberFromAPIเรียกใช้ NumbersAPI และส่งต่อไปยังหมายเลขที่ผู้ใช้ป้อน ผลลัพธ์ที่ส่งคืนโดย API จะใช้เพื่ออัปเดตโมเดล

getRadmonNumberFromAPI : String->Cmd Msg
getRadmonNumberFromAPI newNo =
   let
      url =
         "http://numbersapi.com/"++newNo
   in
      Http.send NewFactArrived (Http.getString url)
เลขที่ วิธี ลายเซ็น คำอธิบาย
1 Http.getString getString: String -> สตริงคำขอ สร้างคำขอ GET และตีความเนื้อหาการตอบสนองเป็นสตริง
2 Http.send ส่ง: (ผลลัพธ์ข้อผิดพลาด a -> msg) -> ขอ a -> Cmd msg ส่งคำขอ Http

หลัก

นี่คือจุดเริ่มต้นของโครงการ Elm

main =
   Html.program
      { init = init
      , view = view
      , update = update
      , subscriptions = subscriptions
      }

วางมันทั้งหมดเข้าด้วยกัน

Step 1 - สร้างโฟลเดอร์ CommandApp และไฟล์ CommandDemo.elm

Step 2- ติดตั้งโมดูล http ใช้คำสั่งแพคเกจติดตั้งเอล์มเอล์ม-lang / http

Step 2 - พิมพ์เนื้อหาสำหรับ CommandDemo.elm ดังที่แสดงด้านล่าง -

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Http

main =
   Html.program
      { init = init
      , view = view
      , update = update
      , subscriptions = subscriptions
      }

-- MODEL
type alias Model =
   { heading : String
   , factText : String
   , input :String
   }

init : (Model, Cmd Msg)
init =
   ( Model "NumbersAPI" "NoFacts" "42"-- set model two fields
   , Cmd.none -- not to invoke api initially
   )

-- UPDATE

type Msg
   = ShowFacts
   |Input String
   | NewFactArrived (Result Http.Error String)

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
   case msg of
      Input newInput ->
      (Model "NumbersApi typing.." "" newInput ,Cmd.none)
      ShowFacts ->
         (model, getRadmonNumberFromAPI model.input)

      NewFactArrived (Ok newFact) ->
         (Model "DataArrived" newFact "", Cmd.none)

      NewFactArrived (Err _) ->
         (model, Cmd.none)

- VIEW

view : Model -> Html Msg
view model =
   div []
      [ h2 [] [text model.heading]
      ,input [onInput Input, value model.input] []
      , button [ onClick ShowFacts ] [ text "show facts" ]
      , br [] []
      , h3 [][text model.factText]
      ]

-- SUBSCRIPTIONS

subscriptions : Model -> Sub Msg
subscriptions model =
   Sub.none

-- HTTP

getRadmonNumberFromAPI : String->Cmd Msg
getRadmonNumberFromAPI newNo =
   let
      url =
      "http://numbersapi.com/"++newNo
   in
      Http.send NewFactArrived (Http.getString url)

Step 4 - เริ่มคำสั่ง

C:\Users\dell\elm\CommandApp> elm make .\CommandDemo.elm

สิ่งนี้จะสร้างไฟล์ html ดังที่แสดงด้านล่าง

Elm - การสมัครสมาชิก

ในบทที่แล้วเราได้พูดถึงว่า View โต้ตอบกับส่วนประกอบอื่น ๆ โดยใช้ Commands ในทำนองเดียวกันส่วนประกอบ (เช่น WebSocket) สามารถพูดคุยกับ View โดยใช้การสมัครสมาชิก การสมัครสมาชิกเป็นวิธีที่แอปพลิเคชัน Elm สามารถรับอินพุตภายนอกเช่นเหตุการณ์แป้นพิมพ์เหตุการณ์ตัวจับเวลาและเหตุการณ์ WebSocket

รูปต่อไปนี้อธิบายถึงบทบาทของการสมัครสมาชิกในแอปพลิเคชัน Elm ผู้ใช้โต้ตอบกับแอปพลิเคชัน Elm ผ่านข้อความ แอปพลิเคชันที่ให้มาใช้ WebSocket และมีสองโหมดการทำงาน -

  • ส่งข้อมูลฝั่งไคลเอ็นต์ไปยังเซิร์ฟเวอร์ซ็อกเก็ตผ่านคำสั่ง
  • รับข้อมูลได้ตลอดเวลาจากเซิร์ฟเวอร์ซ็อกเก็ตผ่านการสมัครสมาชิก

ไวยากรณ์

ไวยากรณ์สำหรับกำหนดการสมัครรับข้อมูลด้านล่าง -

type Sub msg

ภาพประกอบ

ให้เราเข้าใจการสมัครสมาชิกโดยใช้ตัวอย่างง่ายๆ

ในตัวอย่างที่ระบุด้านล่างแอปพลิเคชันจะส่งข้อความไปยังเซิร์ฟเวอร์ เซิร์ฟเวอร์เป็นเซิร์ฟเวอร์ echo ซึ่งตอบสนองต่อไคลเอ็นต์ด้วยข้อความเดียวกัน ข้อความขาเข้าทั้งหมดจะปรากฏในรายการในภายหลัง เราจะใช้ WebSocket (โปรโตคอล wss) เพื่อให้สามารถรับฟังข้อความจากเซิร์ฟเวอร์ได้อย่างต่อเนื่อง WebSocket จะส่งอินพุตของผู้ใช้ไปยังเซิร์ฟเวอร์โดยใช้คำสั่งในขณะที่ใช้การสมัครสมาชิกเพื่อรับข้อความจากเซิร์ฟเวอร์

ส่วนประกอบต่างๆของแอปพลิเคชันมีดังต่อไปนี้ -

เซิร์ฟเวอร์ Echo

เซิร์ฟเวอร์ echo สามารถเข้าถึงได้โดยใช้โปรโตคอล wss เซิร์ฟเวอร์ echo จะส่งอินพุตของผู้ใช้กลับไปยังแอ็พพลิเคชัน รหัสสำหรับกำหนดเซิร์ฟเวอร์ echo มีให้ด้านล่าง -

echoServer : String
echoServer =
"wss://echo.websocket.org"

รุ่น

Model แสดงถึงอินพุตของผู้ใช้และรายการข้อความขาเข้าจากเซิร์ฟเวอร์ซ็อกเก็ต รหัสสำหรับกำหนด Model มีดังต่อไปนี้ -

type alias Model =
   { input : String
   , messages : List String
   }

ข้อความ

ประเภทข้อความจะมีอินพุตสำหรับการป้อนข้อความจากผู้ใช้ ข้อความส่งจะถูกสร้างขึ้นเมื่อผู้ใช้คลิกปุ่มเพื่อส่งข้อความไปยังเซิร์ฟเวอร์ WebSocket NewMessage ถูกใช้เมื่อมีข้อความมาจากเซิร์ฟเวอร์ echo

type Msg
   = Input String
   | Send
   | NewMessage String

ดู

มุมมองของแอปพลิเคชันประกอบด้วยกล่องข้อความและปุ่มส่งเพื่อส่งอินพุตของผู้ใช้ไปยังเซิร์ฟเวอร์ การตอบสนองจากเซิร์ฟเวอร์จะแสดงบน View โดยใช้แท็กdiv

view : Model -> Html Msg
view model =
   div []
      [ input [onInput Input, value model.input] []
      , button [onClick Send] [text "Send"]
      , div [] (List.map viewMessage (List.reverse model.messages))
      ]

viewMessage : String -> Html msg
viewMessage msg =
   div [] [ text msg ]

อัปเดต

ฟังก์ชันอัพเดตจะรับข้อความและส่วนประกอบของโมเดล จะอัปเดตโมเดลตามประเภทข้อความ

update : Msg -> Model -> (Model, Cmd Msg)
update msg {input, messages} =
   case msg of
      Input newInput ->
         (Model newInput messages, Cmd.none)

   Send ->
      (Model "" messages, WebSocket.send echoServer input)

   NewMessage str ->
      (Model input (str :: messages), Cmd.none)
เลขที่ วิธี ลายเซ็น คำอธิบาย
1 WebSocket.listen ฟัง: String -> (String -> msg) -> Sub msg สมัครรับข้อความขาเข้าบน websocket
2 WebSocket.send ส่ง: String -> String -> Cmd msg ส่งคำขอ wss ไปยังที่อยู่เซิร์ฟเวอร์ สิ่งสำคัญคือคุณต้องสมัครรับข้อมูลที่อยู่นี้ด้วยฟัง หากคุณไม่เป็นเช่นนั้นเว็บซ็อกเก็ตจะถูกสร้างขึ้นเพื่อส่งข้อความหนึ่งข้อความแล้วปิด

การสมัครสมาชิก

ฟังก์ชั่นการสมัครใช้งานจะอยู่ในวัตถุโมเดล ที่จะได้รับข้อความจากเซิร์ฟเวอร์ WebSocket เราเรียกWebSocket.listenผ่านในข้อความเป็นNewMessage เมื่อมีข้อความใหม่มาจากเซิร์ฟเวอร์ระบบจะเรียกวิธีการอัพเดต

subscriptions : Model -> Sub Msg
subscriptions model =
WebSocket.listen echoServer NewMessage

หลัก

ฟังก์ชั่นหลักคือจุดเข้าสู่แอปพลิเคชัน elm ดังที่แสดงด้านล่าง

main =
   Html.program
      { init = init
      , view = view
      , update = update
      , subscriptions = subscriptions
      }

วางมันทั้งหมดเข้าด้วยกัน

Step 1 - สร้างไดเร็กทอรี SubscriptionApp และเพิ่มไฟล์ SubscriptionDemo.elm เข้าไป

Step 2 - เพิ่มเนื้อหาต่อไปนี้ในไฟล์ SubscriptionDemo.elm -

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import WebSocket

main =
   Html.program
      { init = init
      , view = view
      , update = update
      , subscriptions = subscriptions
      }

echoServer : String
echoServer =
   "wss://echo.websocket.org"

-- MODEL

type alias Model =
   { input : String
   , messages : List String
   }

init : (Model, Cmd Msg)
init =
   (Model "" [], Cmd.none)

-- UPDATE
type Msg
   = Input String
   | Send
   | NewMessage String

update : Msg -> Model -> (Model, Cmd Msg)
update msg {input, messages} =
   case msg of
      Input newInput ->
      (Model newInput messages, Cmd.none)

   Send ->
      (Model "" messages, WebSocket.send echoServer input)

   NewMessage str ->
      (Model input (str :: messages), Cmd.none)

-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
   WebSocket.listen echoServer NewMessage

-- VIEW
view : Model -> Html Msg
view model =
   div []
      [ input [onInput Input, value model.input] []
      , button [onClick Send] [text "Send"]
      , div [] (List.map viewMessage (List.reverse model.messages))
      ]

viewMessage : String -> Html msg
viewMessage msg =
div [] [ text msg ]

Step 3 - ติดตั้งแพ็คเกจ websockets โดยใช้ตัวจัดการแพ็คเกจ elm

C:\Users\dell\elm\SubscriptionApp> elm-package install elm-lang/websocket

Step 4 - สร้างและสร้างไฟล์ index.html ดังที่แสดงด้านล่าง

C:\Users\dell\elm\SubscriptionApp> elm make .\SubscriptionDemo.elm

Step 5 - เมื่อดำเนินการผลลัพธ์ต่อไปนี้จะถูกสร้างขึ้น -