Qt Quick では、ECMAScript 標準の実装である Qt 用の QML (Qt Meta/Modeling Language) と呼ばれるスクリプト言語が導入されています。したがって、QML 構文は ECMAScript 構文に基づいて実装されます。

ECMAScript 言語標準は、JavaScript および JScript に基づいて Netscape、Sun、Microsoft、Borland、およびその他の企業によって強化および定義されています。

ECMAScript は、スクリプト言語のすべてのプロパティ、メソッド、オブジェクトを定義する単なる説明です。他の言語でも、JavaScript と同様に、機能の基礎として ECMAScript を実装できます。この実装は、ホスト環境に固有の新機能を含めるように拡張できます。たとえば、QML は Qt オブジェクトシステムにシグナルとスロットを導入し、動的プロパティバインディングなどの非常に特徴的な新機能を追加します。

QML はまったく新しいプログラミング言語として、次の 3 つのコアを備えています。

ECMAScript
Qtオブジェクトシステム
Qt Quick標準ライブラリ

この記事のメリット、Qt 開発学習教材パッケージの受け取り料金、技術ビデオ、コンテンツには (C++ 言語基礎、Qt プログラミング入門、QT シグナルとスロットのメカニズム、QT インターフェイス開発イメージ図、QT ネットワーク、QT データベースプログラミング、QT プロジェクト戦闘、QSS、OpenCV、Quick モジュール、インタビューの質問など) ↓↓↓↓↓↓ 下記を参照

1. 文法

ECMAScript の構文を 1 つずつ見てみましょう。(QML は ECMAScript 標準の実装であるため、2 つの構文は基本的に同じです)

1. 大文字と小文字の区別

C++ と同様、変数、関数名、演算子、その他すべての大文字と小文字が区別されます。つまり、変数 area と Area は異なります。

2. 弱い型付け

C++ とは異なり、ECMAScript の変数には特定の型がありません。変数を定義するときは、var 演算子のみが使用され、任意の値に初期化できます。変数に格納されているデータ型はいつでも変更できます (実際、これは避けるようにしてください)。例えば：

var i = 0
console.log(i)
i = "hello"
console.log(i)

構文的には問題ありませんが、変数が常に同じ型の値を保持するようにコーディングすることをお勧めします。

3. ステートメントの後のセミコロンはオプションです

C、C++、Java などの言語では、各ステートメントがセミコロン (;) で終わる必要があります。ECMAScript では、開発者がコード行をセミコロンで終了するかどうかを決定できます。セミコロンがないと、ECMAScript は行の終わりをステートメントの終わりとして扱います (Lua、Python、Visual Basic と同様)。セミコロンを付けるかどうかは好みによります。次のコード行はどちらも構文的に正しいです。

var background = "white"
var i = 0

2. 変数

var 演算子は、ECMAScript で変数を宣言するために使用されます。C++ と同様に、変数名は特定のルールに従う必要があります。

1. 変数宣言

変数は、var 演算子の後に変数名を指定して定義します。例えば：

var i = 0

この例では、変数 i が宣言され、0 に初期化されます。初期化することもできず、使用するときに初期化することもできます。

var ステートメントでは複数の変数を定義できます。例えば：

var i = 0 , name = "j"

この例では、数値に初期化された変数 i を定義し、文字列に初期化された変数名も定義します。C++ や Java とは異なり、var ステートメントで定義された複数の変数は異なる型を持つことができます。

2. 変数の命名規則

変数の名前付けは、次の 2 つの単純なルールに従う必要があります。

最初の文字は文字、アンダースコア (_)、またはドル記号 ($) である必要があります。
残りの文字には、アンダースコア、ドル記号、または任意の英数字を使用できます。

次の変数名は有効です。

var test
var objectName
var —phone
var $1

コードを読みやすくするために、変数に名前を付けるときは、特定の命名スタイルにも従う必要があります。Qt は C++ ベースのアプリケーションフレームワークであり、QML は Qt フレームワークの一部であるため、Qt C++ コードと同じ命名スタイル (キャメルケース) を使用することをお勧めします。

変数 (関数名を含む) の場合は、小文字で始め、単語の間にキャメルケースを使用します。クラス名は大文字で始め、単語の間にキャメルケースを使用します。

3、オリジナルタイプ

ECMAScript には、Unknown、Null、Boolean、Number、String という 5 つのプリミティブ型があります。各プリミティブ型は、それに含まれる値の範囲とそのリテラル表現を定義します。

ECMAScript は、値の型を決定する typeof 演算子を提供します。値がプリミティブ型の場合、typeof はその特定の型名を返します。値が参照値の場合、typeof は一律に型名として「object」を返します。例は次のとおりです。

import QtQuick 2.2

Rectangle {
	Component.onCompleted:{
		var name = "Zhang San Feng"
        console.log(typeof name) // 输出：qml:string
        console.log(typeof 60) // 输出：qml:number
	}
}

変数名の型は文字列で、リテラル 60 の型は数値です。このうち「qml:」はconsole.logを利用して情報を出力する際に付けられるプレフィックスです。

1. 未定義型

未定義タイプには値が 1 つだけあり、未定義です。宣言された変数が初期化されていない場合、変数のデフォルト値は未定義です。例えば：

var temp

上記のコードは変数 temp を宣言していますが、明示的に初期化していないため、その値は未定義に設定されます。これは C++ とは異なります。ECMAScript のこの機能: 未初期化変数にも固定初期値があり、変数を未定義と比較してビジネスロジックを実装できます。例えば：

var runOnce;
...
if(runOnce == undefined) {
    runOnce = true
}
else {
    ...
}

関数に明確な戻り値がない場合、以下に示すように、戻り値も未定義になります。

function blankFunc(){}
console.log(blankFunc() == undefined) // 输出：true

2. ヌル型

Null 型にも値は 1 つだけあり、null です。

変数を明示的に null に初期化し、それに応じていくつかのロジックを実装できます。

3. ブール型

Boolean は ECMAScript で最もよく使用される型の 1 つで、true と false の 2 つの値があります。

4. 数字の種類

Number 型は最も特殊で、32 ビット整数と 64 ビット浮動小数点数の両方を表すことができます。QML コードに直接入力した数値は、数値型のリテラルとして扱われます。

次のコードは、整数値を保持する変数を宣言します。

var integer = 10

数値タイプの最大値は Number.MAX_VALUE で、最小値は Number.MlN_VALUE で、数値値の外側の境界を定義します。すべての ECMAScript 数値はこれら 2 つの値の間にある必要があります。

5.文字列型

ECMAScript の String 型は、Unicode 文字を格納するプリミティブ型として存在し、対応する Qt C++ 型は QString です。C++ と QML プログラミングを混合すると、QString 型の変数はすべて ECMAScript の String にマップされます。

文字列リテラルは二重引用符 (") または一重引用符 (') で宣言できます。Qt では、文字を表すために二重引用符と一重引用符のみが使用されます。一貫性を保つため、文字列を表すために一重引用符を使用しないことをお勧めします。ECMAScript には文字タイプがないため、文字列を表すために一重引用符を使用できます。次の 2 行のコードが有効です。

var name = 'Lv Bu'
var name = "Guan Yu"

4、型変換

プログラミング言語が型変換をサポートしないということは想像できません。ECMAScript では、型変換は非常に簡単です。

1.文字列に変換する

Boolean、Number、String の 3 つのプリミティブ型にはすべて、値を文字列に変換できる toString() メソッドがあります。たとえば、次のコードは Qt で通常どおり実行できます。

var name = "Zhang San Feng"
console.log(name.toString())
console.log(true.toString())
var visible = false
console.log(visible.toString())
var integer = 3.14159
console.log(integer.toString())

Number 型の toString() メソッドは、base によって変換することもできます。次に例を示します。

var integer = 13
console.log (integer.toString(16)) // 输出： D

基数を指定しない場合、最初に Number 型が宣言された形式に関係なく、toString() は 10 進数で出力します。

2.数値に変換する

parselnt() と parseFloat() は数値以外の元の値を数値に変換でき、前者は値を整数に変換し、後者は値を浮動小数点数に変換します。この 2 つのメソッドは String 型に対してのみ使用でき、他の型に対して呼び出すと戻り値が奇妙な NaN になります。

parselnt() と parseFloat() は、最初の非数値文字が見つかるまで文字列をスキャンし、変換の結果を返します。たとえば、parselnt("2014") は 2014 を返します。parseFloat() では、最初の小数点は有効な文字とみなされますが、parselnt() ではそうではありません。

ここではいくつかの例を示します。

var numl = parselnt ("2014 年") // 输出：2014
var num2 = parselnt ("OxC") // 输出：12
var num3 = parselnt ("3.14") // 输出：3
var num4 = parselnt ("green") // 输出：NaN_
var num5 = parseFloat ("3.14159") // 输出：3.14159
var num7 = parseFloat ("Am I Float") // 输出：NaN

parselnt() は基本パターンもサポートしています。いくつかの例を次に示します。

var numl = parselnt ("AK47", 16) // 输出：10
var num2 = parselnt ("AK47", 10) // 输出：NaN
var num3 = parselnt ("010", 8) // 输出：8
var nun4 = parselnt ("010", 10) // 输出：10

浮動小数点数を表す文字列は、NaN を返す parseFloat("OxFE") などの 10 進形式で表現する必要があることに注意してください。

3. 必須の型変換

C/C++ プログラマであれば、キャストに対して愛憎の感情を抱いているはずです。ECMAScript は必須の型変換もサポートしており、次の 3 つの変換があります。

Boolean(value)、値をブール型に変換します。
Number(value)、値を数値 (整数または浮動小数点) に変換します。
String(value)、値を文字列に変換します。

五、機能

ECMAScript の関数には名前が付けられ、再利用可能なコードブロックが付けられます。また、ECMAScript は関数のオーバーロードをサポートしていません。

1. 関数の構文

関数の構文は次のとおりです。

function functionName(arg1, arg2, ..., argN){
	// 要执行的代码
}

function は、関数を定義するときに使用する必要があるキーワードです。functionName は、変数の命名規則に準拠している限り、任意に選択できます。arg1 から argN は関数のパラメータですが、もちろんパラメータがないこともできます。中括弧内は、実行されるコードのブロックです。

パラメータのない関数の例:

function quitApp(){
	Qt .quit ();
}

パラメータを含む関数の例:

function showError(msg){
	console.log("error - ", msg);
}

function travel(country, city){
	console.log("Welcome to ", city, " , ", country);
}

関数のパラメーターを使用する場合、パラメーターは var 演算子のない変数宣言のようなものです。これは、関数パラメータを入力する必要がある C++ とは対照的です。

2. 関数の戻り値

ECMAScript の関数にはデフォルトで戻り値があり、明示的に return ステートメントを使用しない場合でも、未定義が返されます。関数操作の結果を呼び出し元の場所に返したい場合は、return ステートメントを使用できます。簡単な例を次に示します。

function add(numberl, number2){
	var result = number1 + number2;
	console.log(number1, "+" ,number2, result);
	return result;
}

add() 関数は、var ret = add(100, 34); のように呼び出すことができます。

6. オペレーター

ECMAScript の演算子は C++、Java、およびその他の言語の演算子と似ているため、ここでは特定の内容を繰り返しません。ここではキーワード演算子のみが強調表示されています。void、typeof、instanceof、new、delete これらはキーワード演算子です。

void 演算子は特殊で、式の前に置かれ、式の値を破棄し、unknown を返します。
前述したように、typeof はプリミティブ値の場合は元の型を返し、参照値の場合はオブジェクトを返します。これにより、オブジェクトの参照型を正確に判断できなくなるため、ECMAScript では、instanceof 演算子が導入されています。
instanceof はオブジェクトの実際の型をテストするために使用されます。テストする型を明示的に指定する必要があります。例えば：
var str = 新しい文字列 ("hello world"); console.log (文字列の str インスタンス); // 输出：true
new 演算子はオブジェクトの作成に使用されますが、これまでに何度も使用されているため、ここでは繰り返しません。delete 演算子は非常に特殊で、QML では通常、オブジェクト内でユーザーが定義したプロパティのみを削除できますが、フレームワークによって定義されたコアプロパティのほとんどは削除できません。ECMAScript で delete を呼び出すときは、ほとんどの場合、誰かがオブジェクトを参照し続けて逃がさないように、オブジェクトを逆参照します。

7、コンソールを使ってください

コンソールには、ログ情報の出力、アサーション、タイマー、カウンタ、パフォーマンス分析などの機能が用意されていますが、ここではよく使用する最初の 3 つの機能のみを紹介します。

1. ログ情報の出力

コンソールオブジェクトには、デバッグ情報を出力するためのいくつかのメソッドが用意されています。

コンソール.log();
コンソール.デバッグ();
console.info();console.warn();
コンソール.エラー();

2. 断言

console.assert() はアサーション関数を提供し、式を受け入れます。式の値が false の場合、デバッグ情報を出力し、QML が配置されている行を出力します。例: console.assert(false)。

追加の引数を console.assert() に渡すと、それらがコンソールに出力されます。例：

var years = 0;

for (; years < 18; years++){
	console.log("I\'m minor"); 
    continue;
	console.log ("You shoult not see me"};
}

console.assert(years < 18, years);

上記のassert ステートメントは、次の情報を出力します。

18
onCompleted (file:///F:/projects/qtquick/qmls/show_type.qml:187)

QML では、console.assert() を使用すると、アサーションが失敗してもプログラムは終了しないことに注意してください。

3. タイマー

コンソールにはタイマー機能があり、一部のコードの消費時間を測定するのに便利です。

console.time(tag) タイマーを開始します。文字列型のタグが必要です。console.timeEnd(tag) タイマーを停止し、特定のタグに対応する時間のかかる情報をコンソールに出力します。タグは必須です。簡単な例を次に示します。

console.time("regexp");

var str = "We are dogs;\nYour dogs;\nWe want meat.\nPlease.";
var lines = str.match(/^We.*/mg);
console.log(lines.length);
console.log(lines);
console.timeEnd("regexp");

// 输出：regexp: 7ms

記事はブログガーデン(fengMisaka)より転載しました: 【QMLクイックスタート】QML Grammar - Basics