---
title: Strings
description: The string and styled-text types of the Slint language.
---

import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import Link from '@slint/common-files/src/components/Link.astro';
import { Tabs, TabItem } from '@astrojs/starlight/components';
import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';

### string
<SlintProperty propName="string" typeName="string" defaultValue='""'>
Any sequence of utf-8 encoded characters surrounded by quotes is a `string`: `"foo"`.

```slint
export component Example inherits Text {
    text: "hello";
}
```
Escape sequences may be embedded into strings to insert characters that would
be hard to insert otherwise:

| Escape          | Result                                                                                          |
| --------------- | ----------------------------------------------------------------------------------------------- |
| `\"`            | `"`                                                                                             |
| `\\`            | `\`                                                                                             |
| `\n`            | new line                                                                                        |
| `\u{x}`         | where `x` is a hexadecimal number, expands to the unicode code point represented by this number |
| `\{expression}` | the result of evaluating the expression                                                         |

Anything else following an unescaped `\` is an error.

:::note[Note]
  The `\{...}` syntax is not valid within the `slint!` macro in Rust.
:::

<Tabs syncKey="dev-language">
<TabItem label="Rust" icon="seti:rust">
In Rust, properties or struct fields of the string type are mapped to <LangRefLink lang="rust-slint" relpath="struct.SharedString.html">`slint::SharedString`</LangRefLink>.
</TabItem>
<TabItem label="C++" icon="seti:cpp">
In C++, properties or struct fields of the string type are mapped to <LangRefLink lang="cpp" relpath="api/slint/sharedstring/">`slint::SharedString`</LangRefLink>.
</TabItem>
<TabItem label="NodeJS" icon="node">
In JavaScript, properties or struct fields of the string type are mapped to the `String` type.
</TabItem>
<TabItem label="Python" icon="seti:python">
In Python, properties or struct fields of the string type are mapped to the native `str` type.
</TabItem>
</Tabs>

</SlintProperty>

Strings have the following properties and member functions:

#### is-empty

`true` when the string doesn't contain anything, `false` otherwise.

```slint
export component LengthOfString {
    property<bool> empty: "".is-empty; // true
    property<bool> not-empty: "hello".is-empty; // false
}
```

#### character-count

The number of [grapheme clusters](https://www.unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries) in the string.

```slint
export component CharacterCountOfString {
    property<int> empty: "".character-count; // 0
    property<int> hello: "hello".character-count; // 5
    property<int> hiragana: "あいうえお".character-count; // 5
    property<int> surrogate-pair: "😊𩸽".character-count; // 2
    property<int> variation-selectors: "👍🏿".character-count; // 1
    property<int> combining-character: "パ".character-count; // 1
    property<int> zero-width-joiner: "👨‍👩‍👧‍👦".character-count; // 1
    property<int> region-indicator-character: "🇦🇿🇿🇦".character-count; // 2
    property<int> emoji-tag-sequences: "🏴󠁧󠁢󠁥󠁮󠁧󠁿".character-count; // 1
}
```

#### to-lowercase() -> string

Returns the string converted to lowercase,
according to the [Unicode Character Property](https://www.unicode.org/versions/Unicode16.0.0/core-spec/chapter-4/#G124722).

```slint
export component StringToLowercase {
    property<string> hello: "HELLO".to-lowercase(); // "hello"
    property<string> odysseus: "ὈΔΥΣΣΕΎΣ".to-lowercase(); // "ὀδυσσεύς"
}
```

#### to-uppercase() -> string

Returns the string converted to uppercase,
according to the [Unicode Character Property](https://www.unicode.org/versions/Unicode16.0.0/core-spec/chapter-4/#G124722).

```slint
export component StringToUppercase {
    property<string> bye: "tschüß".to-uppercase(); // "TSCHÜSS"
    property<string> new-year: "农历新年".to-uppercase(); // "农历新年"
}
```

#### starts-with(pat: string) -> bool

Returns `true` if the given pattern matches a prefix of this string.

Returns `false` if it does not.

```slint
export component StringStartsWith {
    property<bool> res1: "Hello".starts-with("He"); // true
    property<bool> res2: "你好".starts-with("好"); // false
}
```

#### ends-with(pat: string) -> bool

Returns `true` if the given pattern matches a suffix of this string.

Returns `false` if it does not.

```slint
export component StringEndsWith {
    property<bool> res1: "Hello".ends-with("lo"); // true
    property<bool> res2: "你好".ends-with("你"); // false
}
```

#### to-float() -> float

Returns the number contained in the string, or 0 if the string isn't a valid number.
Use `is-float()` to tell a string holding the number 0 apart from a string that isn't a valid number.

The string is parsed using the decimal separator of the current locale.
See [Converting Between Numbers and Strings](../../language/type-conversions/#converting-between-numbers-and-strings).

#### is-float() -> bool

Returns `true` if the string contains a valid number, `false` otherwise.
Like `to-float()`, it uses the decimal separator of the current locale.

```slint
export component StringToFloat {
    property<float> hello: "hello".to-float(); // 0
    property<bool> goodbye: "goodbye".is-float(); // false
    property<float> value: "1.5".to-float(); // 1.5 if the decimal separator is "."
}
```

### styled-text
<SlintProperty propName="styled-text" typeName="styled-text" defaultValue='""'>

A property that is used with the <Link type="StyledText" label="StyledText element"/>.

Create styled text with the `@markdown()` macro. For example: `@markdown("Hello **Bold**")`.

`@markdown()` supports interpolation: For example, `@markdown("5 + 5 = *\{ 5 + 5 }*")` becomes `"5 + 5 = *10*"`.

Any text passed as an argument to the macro will be escaped, for example `@markdown("Hello \{"*World*"}")` will become `"Hello \*World\*"`.

If multiple string literal are used, they are concatenated.
An invocation with no string content is a compile error.

Use `<font color='...'>` to apply colors.
Literal color names and hex values work directly: `@markdown("<font color='red'>warning</font>")`.
To interpolate a dynamic color, the expression must be of type `color`:
`@markdown("<font color='\{self.my-color}'>colored</font>")`.
Interpolation inside HTML tags is only allowed in the color attribute value.

Create styled text at runtime by parsing markdown with the `StyledText` API:

<Tabs syncKey="dev-language">
<TabItem label="Rust" icon="seti:rust">
In Rust, parse markdown into styled text with <LangRefLink lang="rust-slint" relpath="struct.StyledText.html">`slint::StyledText`</LangRefLink>.
</TabItem>
<TabItem label="C++" icon="seti:cpp">
In C++, parse markdown into styled text with <LangRefLink lang="cpp" relpath="api/slint/styledtext/">`slint::StyledText`</LangRefLink>.
</TabItem>
<TabItem label="NodeJS" icon="node">
In JavaScript, parse markdown into styled text with the <LangRefLink lang="nodejs" relpath="api/classes/styledtext/">`StyledText`</LangRefLink> class.
</TabItem>
<TabItem label="Python" icon="seti:python">
In Python, parse markdown into styled text with the <LangRefLink lang="python" relpath="api/classes/styledtext/">`StyledText`</LangRefLink> class.
</TabItem>
</Tabs>

</SlintProperty>
